import { useState } from 'react';

import { Box } from '@chakra-ui/react';

import { FormSelect } from '@/components/form/FormSelect';
import { useFormidable } from '@/components/form/Formidable';

export default {
  title: 'Components/FormSelect',
};

type BasicFormData = {
  data?: number;
};

export const Default = () => {
  const form = useFormidable<BasicFormData>({});
  return (
    <FormSelect
      label="Simple Title"
      form={form}
      variableName={'data'}
      keyInputValue="id"
      options={[{ id: 111 }, { id: 222 }, { id: 333 }, { id: 123 }]}
    />
  );
};

export const ChangeKeys = () => {
  const form = useFormidable<BasicFormData>({});
  return (
    <FormSelect
      label="Simple Title for (ChangeKeys)"
      form={form}
      variableName={'data'}
      keyInputKey="key"
      keyInputValue="plop"
      options={[
        { key: 111, plop: 'first Item' },
        { key: 222, plop: 'Second Item' },
        { key: 333, plop: 'third item' },
      ]}
    />
  );
};
export const ChangeName = () => {
  const form = useFormidable<BasicFormData>({});
  return (
    <FormSelect
      label="Simple Title for (ChangeName)"
      form={form}
      variableName={'data'}
      options={[
        { id: 111, name: 'first Item' },
        { id: 222, name: 'Second Item' },
        { id: 333, name: 'third item' },
      ]}
    />
  );
};
export const AddableItem = () => {
  const form = useFormidable<BasicFormData>({});
  const [data, setData] = useState([
    { id: 111, name: 'first Item' },
    { id: 222, name: 'Second Item' },
    { id: 333, name: 'third item' },
  ]);
  return (
    <FormSelect
      label="Simple Title for (ChangeName)"
      form={form}
      variableName={'data'}
      addNewItem={(data: string) => {
        return new Promise((resolve, _rejects) => {
          let upperId = 0;
          setData((previous) => {
            previous.forEach((element) => {
              if (element['id'] > upperId) {
                upperId = element['id'];
              }
            });
            upperId++;
            return [...previous, { id: upperId, name: data }];
          });
          resolve({ id: upperId, name: data });
        });
      }}
      options={data}
    />
  );
};

export const DarkBackground = {
  render: () => {
    const form = useFormidable<BasicFormData>({});
    return (
      <Box p="4" color="white" bg="gray.800">
        <FormSelect
          label="Simple Title for (DarkBackground)"
          form={form}
          variableName={'data'}
          options={[
            { id: 111, name: 'first Item' },
            { id: 222, name: 'Second Item' },
            { id: 333, name: 'third item' },
          ]}
        />
      </Box>
    );
  },

  parameters: {
    docs: {
      description: {
        story: 'some story **markdown**',
      },
    },
  },
};