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

import Dropdown, { DropdownItem } from '@/components/Dropdown';
import {
  Box,
  SelectChangeEvent,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material';
import Button from '@/components/Button';

export default {
  title: 'Components/Dropdown',
  component: Dropdown,
  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 dropdownContent = {
  test1: 'Conquer cancer through AI',
  test2: 'test item 2',
  test3: 'test item 3',
};

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

  const [ex1selectedValue, setEx1SelectedValue] = useState<string>('');
  const handleEx1SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setEx1SelectedValue(value as string);
  };
  const [ex2selectedValue, setEx2SelectedValue] = useState<string[]>([]);
  const handleEx2SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setEx2SelectedValue(
      // On autofill we get a stringified value.
      typeof value === 'string' ? value.split(',') : (value as string[]),
    );
  };
  const [ex3selectedValue, setEx3SelectedValue] = useState<string>('test1');
  const handleEx3SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
    const {
      target: { value },
    } = event;
    setEx3SelectedValue(value as string);
  };

  const [open, setOpen] = useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <Table sx={{ maxWidth: '1200px' }}>
      <TableHead>
        <TableRow>
          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
            Using placeholder Example
          </TableCell>
          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
            Dropdown with Button Example
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>
            {/* This placeholder examples are referenced from MUI demo https://v5.mui.com/material-ui/react-select/#placeholder */}
            {/* Example 1 (Placeholder with Single select) */}
            <Dropdown
              className={classNameFromGlobal}
              sx={{ width: '200px' }}
              value={ex1selectedValue}
              onChange={handleEx1SelectedValueChange}
              displayEmpty // to make the placeholder visible. Refer to the following URL: https://v5.mui.com/material-ui/api/select/#select-prop-displayEmpty
              renderValue={(selected) => {
                if (!selected) {
                  return (
                    <Box
                      sx={{
                        color: (theme) => theme.palette.lunit_token.core.text_light,
                      }}
                    >
                      Placeholder Single
                    </Box>
                  );
                }
                return dropdownContent[selected as keyof typeof dropdownContent];
              }}
            >
              {Object.entries(dropdownContent).map(([key, text]) => (
                <DropdownItem key={key} value={key}>
                  {text}
                </DropdownItem>
              ))}
            </Dropdown>
            &nbsp;&nbsp;
            {/* Example 2 (Placeholder with Multiple select) */}
            <Dropdown
              className={classNameFromGlobal}
              sx={{ width: '200px' }}
              value={ex2selectedValue}
              onChange={handleEx2SelectedValueChange}
              select="multiple"
              displayEmpty
              renderValue={(selected) => {
                if ((selected as string[]).length === 0) {
                  return (
                    <Box
                      sx={{
                        color: (theme) => theme.palette.lunit_token.core.text_light,
                      }}
                    >
                      Placeholder multiple
                    </Box>
                  );
                }
                return (selected as string[])
                  .map((value) => dropdownContent[value as keyof typeof dropdownContent])
                  .join(', ');
              }}
            >
              {Object.entries(dropdownContent).map(([key, text]) => (
                <DropdownItem key={key} value={key}>
                  {text}
                </DropdownItem>
              ))}
            </Dropdown>
          </TableCell>
          <TableCell>
            {/* Example 3 (Button dropdown) */}
            <Box sx={{ position: 'relative' }}>
              <Button onClick={handleOpen}>Dropdown Button</Button>
              <Dropdown
                value={ex3selectedValue}
                onChange={handleEx3SelectedValueChange}
                open={open}
                onClose={handleClose}
                onOpen={handleOpen}
                sx={{
                  clip: 'rect(0 0 0 0)',
                  clipPath: 'inset(50%)',
                  height: '1px',
                  overflow: 'hidden',
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  whiteSpace: 'nowrap',
                  width: '1px',
                }}
              >
                {Object.entries(dropdownContent).map(([key, text]) => (
                  <DropdownItem key={key} value={key}>
                    {text}
                  </DropdownItem>
                ))}
              </Dropdown>
            </Box>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
};

export const DropdownExamples: StoryObj<typeof Dropdown> = {
  render: DropdownExampleTemplate,
  parameters: {
    controls: {
      include: [],
    },
    chromatic: { disableSnapshot: true },
  },
};