import { useState } from 'react';

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

import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
import { useFormidable } from '@/components/formidable/FormidableConfig';

import { Formidable } from '../formidable';

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

type BasicFormData = {
  data?: number[];
};

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

export const ChangeKeys = () => {
  const form = useFormidable<BasicFormData>({});
  return (
    <Formidable.From form={form}>
      <FormSelectMultiple
        label="Simple Title for (ChangeKeys)"
        name="data"
        keyInputKey="key"
        keyInputValue="plop"
        options={[
          { key: 111, plop: 'first Item' },
          { key: 222, plop: 'Second Item' },
          { key: 333, plop: 'third item' },
        ]}
      />
    </Formidable.From>
  );
};
export const ChangeName = () => {
  const form = useFormidable<BasicFormData>({});
  return (
    <Formidable.From form={form}>
      <FormSelectMultiple
        label="Simple Title for (ChangeName)"
        name="data"
        options={[
          { id: 111, name: 'first Item' },
          { id: 222, name: 'Second Item' },
          { id: 333, name: 'third item' },
        ]}
      />
    </Formidable.From>
  );
};
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 (
    <Formidable.From form={form}>
      <FormSelectMultiple
        label="Simple Title for (ChangeName)"
        name="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}
      />
    </Formidable.From>
  );
};

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

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