import { render, screen, fireEvent } from '@testing-library/react';
import * as React from 'react';

import {
  SliderField,
  SLIDER_LABEL_TEST_ID,
  SLIDER_RANGE_TEST_ID,
  SLIDER_ROOT_TEST_ID,
  SLIDER_TRACK_TEST_ID,
} from '../SliderField';
import { Heading } from '../../Heading';
import {
  testFlexProps,
  expectFlexContainerStyleProps,
} from '../../Flex/__tests__/Flex.test';
import { ComponentClassNames } from '../../shared/constants';
import { AUTO_GENERATED_ID_PREFIX } from '../../utils/useStableId';

// Jest uses JSDom, which apparently doesn't support the ResizeObserver API
// This will get around that API reference error in Jest
// We don't necessarily test its functionality since Radix should be responsible for that
window.ResizeObserver =
  window.ResizeObserver ||
  jest.fn().mockImplementation(() => ({
    disconnect: jest.fn(),
    observe: jest.fn(),
    unobserve: jest.fn(),
  }));

describe('SliderField:', () => {
  describe('Flex wrapper', () => {
    it('should render all flex style props', async () => {
      render(
        <SliderField
          defaultValue={0}
          testId="slider-field"
          label="slider"
          {...testFlexProps}
        />
      );
      const sliderField = await screen.findByTestId('slider-field');
      expectFlexContainerStyleProps(sliderField);
    });
  });

  describe('Label', () => {
    it('should render expected field classname', async () => {
      render(<SliderField defaultValue={0} label="slider" />);

      const label = await screen.findByTestId(SLIDER_LABEL_TEST_ID);
      expect(label).toHaveClass(
        ComponentClassNames.Label,
        ComponentClassNames.SliderFieldLabel
      );
    });

    it('should forward ref to DOM element', async () => {
      const ref = React.createRef<HTMLSpanElement>();
      const testId = 'sliderTestId';
      render(
        <SliderField
          defaultValue={0}
          label="slider"
          ref={ref}
          testId={testId}
        />
      );

      await screen.findByTestId(testId);
      expect(ref.current?.nodeName).toBe('SPAN');
    });

    it('should have `amplify-visually-hidden` class when labelHidden is true', async () => {
      render(<SliderField defaultValue={0} label="slider" labelHidden />);

      const label = await screen.findByTestId(SLIDER_LABEL_TEST_ID);
      expect(label).toHaveClass('amplify-visually-hidden');
    });

    it('should set autogenerated id', async () => {
      render(<SliderField label="slider" />);
      const label = await screen.findByTestId(SLIDER_LABEL_TEST_ID);
      expect(label.id.startsWith(AUTO_GENERATED_ID_PREFIX)).toBeTruthy();
    });

    it('should display value if isValueHidden is false', () => {
      render(<SliderField defaultValue={10} label="slider" />);
      const value = screen.queryByText('10');
      expect(value).toBeInTheDocument();
    });

    it('should display string formatted value if formatValue is provided', async () => {
      render(
        <SliderField
          defaultValue={10}
          label="slider"
          formatValue={(value) => {
            return `${value}%`;
          }}
        />
      );

      const value = await screen.findByText('10%');
      expect(value).toBeInTheDocument();
    });

    it('should display component-based formatted value if formatValue is provided', async () => {
      render(
        <SliderField
          defaultValue={10}
          label="slider"
          formatValue={(value) => {
            return <Heading>{value}</Heading>;
          }}
        />
      );

      const heading = await screen.findByText('10');
      expect(heading).toHaveClass(ComponentClassNames.Heading);
    });

    it('should not display value if isValueHidden is true', () => {
      render(<SliderField defaultValue={10} label="slider" isValueHidden />);
      const value = screen.queryByText('10');
      expect(value).not.toBeInTheDocument();
    });
  });

  describe('Slider', () => {
    const ControlledSliderField = () => {
      const [value, setValue] = React.useState(5);
      return <SliderField label="slider" value={value} onChange={setValue} />;
    };

    it('should work as uncontrolled component', async () => {
      render(<SliderField defaultValue={10} label="slider" />);
      const slider = await screen.findByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '10');
      fireEvent.keyDown(slider, { key: 'ArrowUp', code: 'ArrowUp' });
      expect(slider).toHaveAttribute('aria-valuenow', '11');
      fireEvent.keyDown(slider, { key: 'ArrowUp', code: 'ArrowUp' });
      expect(slider).toHaveAttribute('aria-valuenow', '12');
      fireEvent.keyDown(slider, { key: 'ArrowDown', code: 'ArrowDown' });
      expect(slider).toHaveAttribute('aria-valuenow', '11');
      fireEvent.keyDown(slider, { key: 'ArrowDown', code: 'ArrowDown' });
      expect(slider).toHaveAttribute('aria-valuenow', '10');
    });

    it('should work as controlled component', async () => {
      render(<ControlledSliderField />);
      const slider = await screen.findByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '5');
      fireEvent.keyDown(slider, { key: 'ArrowUp', code: 'ArrowUp' });
      expect(slider).toHaveAttribute('aria-valuenow', '6');
      fireEvent.keyDown(slider, { key: 'ArrowUp', code: 'ArrowUp' });
      expect(slider).toHaveAttribute('aria-valuenow', '7');
      fireEvent.keyDown(slider, { key: 'ArrowDown', code: 'ArrowDown' });
      expect(slider).toHaveAttribute('aria-valuenow', '6');
      fireEvent.keyDown(slider, { key: 'ArrowDown', code: 'ArrowDown' });
      expect(slider).toHaveAttribute('aria-valuenow', '5');
    });

    it('should set step', async () => {
      render(<SliderField defaultValue={0} label="slider" step={3} />);
      const slider = await screen.findByRole('slider');
      expect(slider).toHaveAttribute('aria-valuenow', '0');
      fireEvent.keyDown(slider, { key: 'ArrowUp', code: 'ArrowUp' });
      expect(slider).toHaveAttribute('aria-valuenow', '3');
      fireEvent.keyDown(slider, { key: 'ArrowUp', code: 'ArrowUp' });
      expect(slider).toHaveAttribute('aria-valuenow', '6');
      fireEvent.keyDown(slider, { key: 'ArrowDown', code: 'ArrowDown' });
      expect(slider).toHaveAttribute('aria-valuenow', '3');
      fireEvent.keyDown(slider, { key: 'ArrowDown', code: 'ArrowDown' });
      expect(slider).toHaveAttribute('aria-valuenow', '0');
    });

    it('should render size classes for SliderField', async () => {
      render(
        <div>
          <SliderField
            defaultValue={0}
            size="small"
            testId="small"
            label="slider"
            step={3}
          />
          <SliderField
            defaultValue={0}
            size="large"
            testId="large"
            label="slider"
            step={3}
          />
        </div>
      );

      const small = await screen.findByTestId('small');
      const large = await screen.findByTestId('large');

      expect(small.classList).toContain(
        `${ComponentClassNames['Field']}--small`
      );
      expect(large.classList).toContain(
        `${ComponentClassNames['Field']}--large`
      );
    });

    describe('Root', () => {
      it('should render default and custom classname', async () => {
        const className = 'class-test';
        render(
          <SliderField defaultValue={0} label="slider" className={className} />
        );
        const root = await screen.findByTestId(SLIDER_ROOT_TEST_ID);
        expect(root).toHaveClass(
          ComponentClassNames.SliderFieldRoot,
          className
        );
      });

      it('should pass orientation prop', async () => {
        render(
          <SliderField defaultValue={0} label="slider" orientation="vertical" />
        );
        const root = await screen.findByTestId(SLIDER_ROOT_TEST_ID);
        expect(root).toHaveAttribute('data-orientation', 'vertical');
      });

      it('should be disabled', async () => {
        render(<SliderField defaultValue={0} label="slider" isDisabled />);
        const root = await screen.findByTestId(SLIDER_ROOT_TEST_ID);
        expect(root).toHaveAttribute('data-disabled', '');
      });
    });

    describe('Track', () => {
      it('should render default classname', async () => {
        render(<SliderField defaultValue={0} label="slider" />);
        const track = await screen.findByTestId(SLIDER_TRACK_TEST_ID);
        expect(track).toHaveClass(ComponentClassNames.SliderFieldTrack);
      });

      it('should set empty track color', async () => {
        render(
          <SliderField defaultValue={0} label="slider" emptyTrackColor="red" />
        );
        const track = await screen.findByTestId(SLIDER_TRACK_TEST_ID);
        expect(track).toHaveStyle('background-color: red');
      });

      it('should set track width for horizontal slider', async () => {
        render(<SliderField defaultValue={0} label="slider" trackSize="3px" />);
        const track = await screen.findByTestId(SLIDER_TRACK_TEST_ID);
        expect(track).toHaveStyle('height: 3px');
      });

      it('should set track width for vertical slider', async () => {
        render(
          <SliderField
            defaultValue={0}
            label="slider"
            orientation="vertical"
            trackSize="3px"
          />
        );
        const track = await screen.findByTestId(SLIDER_TRACK_TEST_ID);
        expect(track).toHaveStyle('width: 3px');
      });
    });

    describe('Range', () => {
      it('should render default classname', async () => {
        render(<SliderField defaultValue={0} label="slider" />);
        const range = await screen.findByTestId(SLIDER_RANGE_TEST_ID);
        expect(range).toHaveClass(ComponentClassNames.SliderFieldRange);
      });

      it('should render orientation classes for SliderField', async () => {
        render(
          <SliderField defaultValue={0} label="slider" orientation="vertical" />
        );
        const vertical = await screen.findByTestId(SLIDER_RANGE_TEST_ID);
        expect(vertical).toHaveClass(
          `${ComponentClassNames.SliderFieldRange}--vertical`
        );
      });

      it('should set filled track color', async () => {
        render(
          <SliderField
            defaultValue={0}
            label="slider"
            filledTrackColor="teal"
          />
        );
        const range = await screen.findByTestId(SLIDER_RANGE_TEST_ID);
        expect(range).toHaveStyle('background-color: teal');
      });
    });

    describe('Thumb', () => {
      it('should render default classname', async () => {
        render(<SliderField defaultValue={0} label="slider" />);
        const thumb = await screen.findByRole('slider');
        expect(thumb).toHaveClass(ComponentClassNames.SliderFieldThumb);
      });

      it('should pass min and max props', async () => {
        render(
          <SliderField defaultValue={0} label="slider" min={-100} max={100} />
        );
        const thumb = await screen.findByRole('slider');
        expect(thumb).toHaveAttribute('aria-valuemin', '-100');
        expect(thumb).toHaveAttribute('aria-valuemax', '100');
      });

      it('should set thumb color', async () => {
        render(
          <SliderField defaultValue={0} label="slider" thumbColor="orange" />
        );
        const thumb = await screen.findByRole('slider');
        expect(thumb).toHaveStyle('background-color: orange');
      });

      it('should map to label correctly', async () => {
        render(
          <SliderField defaultValue={0} label="slider" id="slider-field" />
        );
        const thumb = await screen.findByRole('slider');
        expect(thumb).toHaveAccessibleName('slider 0');
      });

      it('should set aria-valuetext', async () => {
        render(
          <SliderField defaultValue={0} label="slider" ariaValuetext="Monday" />
        );
        const thumb = await screen.findByRole('slider');
        expect(thumb).toHaveAttribute('aria-valuetext', 'Monday');
      });
    });
  });

  describe('Error messages', () => {
    const errorMessage = 'This is an error message';
    it('should not show when hasError is false', () => {
      render(
        <SliderField
          defaultValue={0}
          label="slider"
          errorMessage={errorMessage}
        />
      );

      const errorText = screen.queryByText(errorMessage);
      expect(errorText).not.toBeInTheDocument();
    });

    it('show when hasError and errorMessage', () => {
      render(
        <SliderField
          defaultValue={0}
          label="slider"
          errorMessage={errorMessage}
          hasError
        />
      );
      const errorText = screen.queryByText(errorMessage);
      expect(errorText?.innerHTML).toContain(errorMessage);
    });
  });

  describe('descriptive message', () => {
    it('should render descriptiveText if it is provided', () => {
      render(
        <SliderField
          defaultValue={0}
          label="slider"
          descriptiveText="Description"
        />
      );

      const descriptiveText = screen.queryByText('Description');
      expect(descriptiveText?.innerHTML).toContain('Description');
    });

    it('should map to descriptive text correctly', async () => {
      render(
        <SliderField
          defaultValue={0}
          label="slider"
          descriptiveText="Description"
        />
      );

      const slider = await screen.findByRole('slider');
      expect(slider).toHaveAccessibleDescription('Description');
    });
  });
});