import React, { useState } from 'react';
import { StoryFn, Meta, StoryObj } from '@storybook/react-webpack5';

import Dropdown, { DropdownItem } from '@/components/Dropdown';
import { Box, SelectChangeEvent } from '@mui/material';

export default {
  title: 'Components/Dropdown',
  component: Dropdown,
  args: {
    size: 'medium',
    select: 'single',
    error: false,
    disabled: false,
  },
  argTypes: {
    size: {
      control: {
        type: 'radio',
      },
      options: ['small', 'medium', 'large'],
      description: 'The size of the dropdown. Default is medium.',
    },
    select: {
      control: {
        type: 'radio',
      },
      options: ['single', 'multiple'],
      description: 'The select type of the dropdown. Default is single.',
    },
    error: {
      control: {
        type: 'radio',
      },
      options: [true, false],
      description: 'The error prop toggles the error state.',
    },
    disabled: {
      control: {
        type: 'radio',
      },
      options: [true, false],
      description: 'If true, the text field will be disabled.',
    },
  },
} as Meta<typeof Dropdown>;

const BasicDropdownTemplate: StoryFn<typeof Dropdown> = (args, context) => {
  const classNameFromGlobal = context.globals.theme;

  // In a single select, selectedValue can be used as a string type instead of an array.
  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
  const [selectedValue, setSelectedValue] = useState<string[]>(['test1']);
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : (value as string[]),
    );
  };

  return (
    <Box>
      <Dropdown
        {...args}
        className={classNameFromGlobal}
        value={selectedValue}
        onChange={handleSelectedValueChange}
        sx={{ width: '150px' }}
      >
        <DropdownItem value={'test1'}>Conquer cancer through AI</DropdownItem>
        <DropdownItem value={'test2'}>test item 2</DropdownItem>
        <DropdownItem value={'test3'}>test item 3</DropdownItem>
      </Dropdown>
    </Box>
  );
};

export const BasicDropdown: StoryObj<typeof Dropdown> = {
  render: BasicDropdownTemplate,
  parameters: {
    chromatic: { disableSnapshot: true },
  },
};

const SizeTemplate: StoryFn<typeof Dropdown> = (args, context) => {
  const classNameFromGlobal = context.globals.theme;

  // In a single select, selectedValue can be used as a string type instead of an array.
  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
  const [selectedValue, setSelectedValue] = useState<string[]>(['test1']);
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : (value as string[]),
    );
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue}
          onChange={handleSelectedValueChange}
          size="small"
          sx={{ width: '150px' }}
        >
          <DropdownItem value={'test1'}>Small item 1</DropdownItem>
          <DropdownItem value={'test2'}>Small item 2</DropdownItem>
          <DropdownItem value={'test3'}>Small item 3</DropdownItem>
        </Dropdown>
      </Box>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue}
          onChange={handleSelectedValueChange}
          size="medium"
          sx={{ width: '150px' }}
        >
          <DropdownItem value={'test1'}>Medium item 1</DropdownItem>
          <DropdownItem value={'test2'}>Medium item 2</DropdownItem>
          <DropdownItem value={'test3'}>Medium item 3</DropdownItem>
        </Dropdown>
      </Box>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue}
          onChange={handleSelectedValueChange}
          size="large"
          sx={{ width: '150px' }}
        >
          <DropdownItem value={'test1'}>Large item 1</DropdownItem>
          <DropdownItem value={'test2'}>Large item 2</DropdownItem>
          <DropdownItem value={'test3'}>Large item 3</DropdownItem>
        </Dropdown>
      </Box>
    </Box>
  );
};

export const Size: StoryObj<typeof Dropdown> = {
  render: SizeTemplate,
  parameters: {
    chromatic: { disableSnapshot: true },
  },
  argTypes: {
    size: {
      control: false,
    },
  },
};

const SelectTypeTemplate: StoryFn<typeof Dropdown> = (args, context) => {
  const classNameFromGlobal = context.globals.theme;

  const [selectedValue, setSelectedValue] = useState<string>('single1');
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(value as string);
  };
  const [selectedValue2, setSelectedValue2] = useState<string[]>(['multiple1']);
  const handleSelectedValueChange2 = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue2(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : (value as string[]),
    );
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue}
          onChange={handleSelectedValueChange}
          sx={{ width: '150px' }}
        >
          <DropdownItem value={'single1'}>Single item 1</DropdownItem>
          <DropdownItem value={'single2'}>Single item 2</DropdownItem>
          <DropdownItem value={'single3'}>Single item 3</DropdownItem>
        </Dropdown>
      </Box>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue2}
          onChange={handleSelectedValueChange2}
          select="multiple"
          sx={{ width: '200px' }}
        >
          <DropdownItem value={'multiple1'}>Multiple item 1</DropdownItem>
          <DropdownItem value={'multiple2'}>Multiple item 2</DropdownItem>
          <DropdownItem value={'multiple3'}>Multiple item 3</DropdownItem>
        </Dropdown>
      </Box>
    </Box>
  );
};

export const SelectType: StoryObj<typeof Dropdown> = {
  render: SelectTypeTemplate,
  parameters: {
    chromatic: { disableSnapshot: true },
  },
  argTypes: {
    select: {
      control: false,
    },
  },
};

const ErrorTemplate: StoryFn<typeof Dropdown> = (args, context) => {
  const classNameFromGlobal = context.globals.theme;

  // In a single select, selectedValue can be used as a string type instead of an array.
  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
  const [selectedValue, setSelectedValue] = useState<string[]>(['test1']);
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : (value as string[]),
    );
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue}
          onChange={handleSelectedValueChange}
          error
          sx={{ width: '150px' }}
        >
          <DropdownItem value={'test1'}>Small item 1</DropdownItem>
          <DropdownItem value={'test2'}>Small item 2</DropdownItem>
          <DropdownItem value={'test3'}>Small item 3</DropdownItem>
        </Dropdown>
      </Box>
    </Box>
  );
};

export const Error: StoryObj<typeof Dropdown> = {
  render: ErrorTemplate,
  parameters: {
    chromatic: { disableSnapshot: true },
  },
  argTypes: {
    error: {
      control: false,
    },
  },
};

const DisabledTemplate: StoryFn<typeof Dropdown> = (args, context) => {
  const classNameFromGlobal = context.globals.theme;

  // In a single select, selectedValue can be used as a string type instead of an array.
  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
  const [selectedValue, setSelectedValue] = useState<string[]>(['test1']);
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : (value as string[]),
    );
  };

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <Box>
        <Dropdown
          {...args}
          className={classNameFromGlobal}
          value={selectedValue}
          onChange={handleSelectedValueChange}
          disabled
          sx={{ width: '150px' }}
        >
          <DropdownItem value={'test1'}>Small item 1</DropdownItem>
          <DropdownItem value={'test2'}>Small item 2</DropdownItem>
          <DropdownItem value={'test3'}>Small item 3</DropdownItem>
        </Dropdown>
      </Box>
    </Box>
  );
};

export const Disabled: StoryObj<typeof Dropdown> = {
  render: DisabledTemplate,
  parameters: {
    chromatic: { disableSnapshot: true },
  },
  argTypes: {
    disabled: {
      control: false,
    },
  },
};