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

import Dropdown, { DropdownDivider, DropdownItem, DropdownSubtitle } from '@/components/Dropdown';
import {
  Box,
  SelectChangeEvent,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material';
import Demo from '@lunit/design-system-icons/Demo';
import ViewfinderT1 from '@lunit/design-system-icons/ViewfinderT1';
import RulerT2 from '@lunit/design-system-icons/RulerT2';

export default {
  title: 'Components/Dropdown',
  component: DropdownItem,
  argTypes: {
    leftIcon: {
      control: false,
      description: `Use this prop when you want to add icon.
        \n It is added to the left of the text criteria`,
      table: {
        defaultValue: { summary: 'undefined' },
        type: { summary: 'JSX.Element' },
      },
    },
    rightText: {
      description: 'Use this prop when you want to add text.',
      table: {
        defaultValue: { summary: 'undefined' },
      },
    },
    isFilledStyle: {
      control: {
        type: 'radio',
      },
      options: [true, false],
      description: 'Only for GNB or few situations of single select type.',
      table: {
        defaultValue: { summary: 'false' },
      },
    },
    disabled: {
      control: {
        type: 'radio',
      },
      options: [true, false],
      description: 'If true, the component will be disabled.',
      table: {
        defaultValue: { summary: 'false' },
      },
    },
  },
  parameters: {
    controls: {
      include: ['leftIcon', 'rightText', 'isFilledStyle', 'disabled'],
    },
  },
} as Meta<typeof DropdownItem>;

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

  const [selectedValue, setSelectedValue] = useState<string>('test1');
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(value as string);
  };

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

export const BasicDropdownItem: StoryObj<typeof DropdownItem> = {
  render: BasicDropdownItemTemplate,
  name: 'Basic DropdownItem',
  parameters: {
    chromatic: {
      disableSnapshot: true,
      delay: 500,
    },
  },
  play: async ({ canvasElement, userEvent }) => {
    // canvasElement를 사용하여 DOM 요소 찾기
    const canvas = within(canvasElement);
    const dropdownButton = await canvas.getByRole('combobox');

    if (dropdownButton) {
      await userEvent.click(dropdownButton);

      // dropdown이 완전히 열릴 때까지 잠시 대기
      await new Promise((resolve) => setTimeout(resolve, 200));
    }
  },
};

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

  const [selectedValue, setSelectedValue] = useState<string>('test1');
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(value as string);
  };
  const [selectedValue2, setSelectedValue2] = useState<string[]>(['test1']);
  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 (
    <Table sx={{ maxWidth: '1200px' }}>
      <TableHead>
        <TableRow>
          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
            Single select
          </TableCell>
          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
            Single select(Filled Style)
          </TableCell>
          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
            Multiple select
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>
            <Dropdown
              className={classNameFromGlobal}
              value={selectedValue}
              onChange={handleSelectedValueChange}
              sx={{ width: '150px' }}
            >
              <DropdownItem value={'test1'} {...args}>
                Conquer cancer through AI
              </DropdownItem>
              <DropdownItem value={'test2'} {...args}>
                test item 2
              </DropdownItem>
              <DropdownItem value={'test3'} {...args}>
                test item 3
              </DropdownItem>
            </Dropdown>
          </TableCell>
          <TableCell>
            <Dropdown
              className={classNameFromGlobal}
              value={selectedValue}
              onChange={handleSelectedValueChange}
              sx={{ width: '150px' }}
            >
              <DropdownItem value={'test1'} isFilledStyle {...args}>
                Conquer cancer through AI
              </DropdownItem>
              <DropdownItem value={'test2'} isFilledStyle {...args}>
                test item 2
              </DropdownItem>
              <DropdownItem value={'test3'} isFilledStyle {...args}>
                test item 3
              </DropdownItem>
            </Dropdown>
          </TableCell>
          <TableCell>
            <Dropdown
              className={classNameFromGlobal}
              select="multiple"
              value={selectedValue2}
              onChange={handleSelectedValueChange2}
              sx={{ width: '230px' }}
            >
              <DropdownItem value={'test1'} {...args}>
                test item1
              </DropdownItem>
              <DropdownItem value={'test2'} {...args}>
                test item 2
              </DropdownItem>
              <DropdownItem value={'test3'} {...args}>
                test item 3
              </DropdownItem>
            </Dropdown>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};

export const DropdownItemSelectStyle: StoryObj<typeof DropdownItem> = {
  render: DropdownItemSelectStyleTemplate,
  name: 'DropdownItem : Style by Select Type',
  parameters: {
    controls: {
      include: [],
    },
    chromatic: { disableSnapshot: true },
  },
};

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

  const [selectedValue, setSelectedValue] = useState<string>('test1');
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(value as string);
  };

  return (
    <Box>
      <Dropdown
        className={classNameFromGlobal}
        value={selectedValue}
        onChange={handleSelectedValueChange}
        sx={{ width: '150px' }}
      >
        <DropdownItem
          value={'test1'}
          leftIcon={<Demo fontSize="small" />}
          rightText="lunit"
          {...args}
        >
          Conquer cancer through AI
        </DropdownItem>
        <DropdownItem
          value={'test2'}
          leftIcon={<RulerT2 fontSize="small" />}
          rightText="design"
          {...args}
        >
          test item 2
        </DropdownItem>
        <DropdownItem
          value={'test3'}
          leftIcon={<ViewfinderT1 fontSize="small" />}
          rightText="system"
          {...args}
        >
          test item 3
        </DropdownItem>
      </Dropdown>
    </Box>
  );
};

export const DropdownItemWithIconText: StoryObj<typeof DropdownItem> = {
  render: DropdownItemWithIconTextTemplate,
  name: 'DropdownItem : With Left Icon, Right Text',
  parameters: {
    controls: {
      include: [],
    },
    chromatic: {
      disableSnapshot: true,
      delay: 500,
    },
  },
  play: async ({ canvasElement, userEvent }) => {
    // canvasElement를 사용하여 DOM 요소 찾기
    const canvas = within(canvasElement);
    const dropdownButton = await canvas.getByRole('combobox');

    if (dropdownButton) {
      await userEvent.click(dropdownButton);

      // dropdown이 완전히 열릴 때까지 잠시 대기
      await new Promise((resolve) => setTimeout(resolve, 200));
    }
  },
};

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

  const [selectedValue, setSelectedValue] = useState<string>('test1');
  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setSelectedValue(value as string);
  };

  return (
    <Box>
      <Dropdown
        className={classNameFromGlobal}
        value={selectedValue}
        onChange={handleSelectedValueChange}
        sx={{ width: '150px' }}
      >
        <DropdownSubtitle title="Subtitle 1" />
        <DropdownItem value={'test1'} leftIcon={<Demo fontSize="small" />} {...args}>
          Conquer cancer through AI
        </DropdownItem>
        <DropdownItem value={'test2'} leftIcon={<RulerT2 fontSize="small" />} {...args}>
          test item 2
        </DropdownItem>
        <DropdownItem value={'test3'} leftIcon={<ViewfinderT1 fontSize="small" />} {...args}>
          test item 3
        </DropdownItem>
        <DropdownDivider />
        <DropdownSubtitle title="Subtitle 2" />
        <DropdownItem value={'test4'} {...args}>
          Example 1
        </DropdownItem>
        <DropdownItem value={'test5'} {...args}>
          Example 2
        </DropdownItem>
        <DropdownItem value={'test6'} {...args}>
          Example 3
        </DropdownItem>
      </Dropdown>
    </Box>
  );
};

export const DropdownItemDividerSubtitle: StoryObj<typeof DropdownItem> = {
  render: DropdownItemDividerSubtitleTemplate,
  name: 'DropdownItem : Divider, Subtitle',
  parameters: {
    controls: {
      include: [],
    },
    chromatic: {
      disableSnapshot: true,
      delay: 500,
    },
  },
  play: async ({ canvasElement, userEvent }) => {
    // canvasElement를 사용하여 DOM 요소 찾기
    const canvas = within(canvasElement);
    const dropdownButton = await canvas.getByRole('combobox');

    if (dropdownButton) {
      await userEvent.click(dropdownButton);

      // dropdown이 완전히 열릴 때까지 잠시 대기
      await new Promise((resolve) => setTimeout(resolve, 200));
    }
  },
};