import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import {
  ThemeProviderWithStyledEngine,
  Select,
  SelectOption,
  UserAvatar,
} from "..";
import { GroupedSelectOption } from "../components/select/types";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>
    <div style={{ padding: "1em" }}>{Story()}</div>
  </ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Inputs/Select",
  component: Select,
  decorators: [decorator],
  argTypes: {
    multiple: {
      table: {
        disable: true,
      },
    },
    error: {
      type: "boolean",
    },
    disabled: {
      type: "boolean",
    },
    height: {
      control: {
        type: "select",
      },
      options: ["32", "40"],
    },
  },
} satisfies Meta<typeof Select>;

export default meta;

const Template: StoryFn<typeof Select> = (args) => {
  const [value, setValue] = React.useState<string>();

  return (
    <Select
      value={value}
      id="please-specify-the-id-when-youre-using-this-component"
      onChange={(e) => {
        setValue(e.target.value as string);
      }}
      {...args}
    />
  );
};

const MultipleSelectTemplate: StoryFn<typeof Select> = (args) => {
  const [value, setValue] = React.useState<string[]>(["1"]);

  return (
    <Select
      value={value}
      id="please-specify-the-id-when-youre-using-this-component"
      onChange={(e) => {
        if (Array.isArray(e.target.value)) {
          setValue(e.target.value as string[]);

          return;
        }

        setValue([e.target.value as string]);
      }}
      {...args}
    />
  );
};

const GroupedTemplate: StoryFn<typeof Select> = (args) => {
  const [value, setValue] = React.useState<string>();

  return (
    <Select
      value={value}
      onChange={(e) => {
        setValue(e.target.value as string);
      }}
      {...args}
    />
  );
};

const GroupedMultiTemplate: StoryFn<typeof Select> = (args) => {
  const [value, setValue] = React.useState<string[]>(["option1", "option2"]);

  return (
    <Select
      value={value}
      onChange={(e) => {
        if (Array.isArray(e.target.value)) {
          setValue(e.target.value as string[]);

          return;
        }

        setValue([e.target.value as string]);
      }}
      {...args}
    />
  );
};

const options = [
  {
    value: "1",
    label: "Option 1",
  },
  {
    value: "2",
    label: "Option 2",
  },
  {
    value: "3",
    label: "Option 3",
    icon: "plus",
    showIconInChip: true,
  },
  {
    value: "4",
    label: "Option 4",
    icon: (
      <UserAvatar
        id={String(Math.random() * 100)}
        name="John"
        size={20}
        online
      />
    ),
    showIconInChip: true,
  },
  {
    value: "5",
    label: "Disabled",
    disabled: true,
  },
] as SelectOption[];

const groupedOptions = [
  {
    label: "Group 1",
    options: [
      {
        label: "Option 1",
        value: "option1",
        icon: "three-connected-dots",
        showIconInChip: true,
      },
      {
        label: "Option 2",
        value: "option2",
        icon: "exclamation-mark-octagon",
        showIconInChip: true,
        disabled: true,
      },
    ],
  },
  {
    label: "Group 2",
    primary: true,
    options: [
      {
        label: "Option 3",
        value: "option3",
      },
      {
        label: "Option 4",
        value: "option4",
      },
    ],
  },
  {
    label: "Group 3",
    options: [
      {
        label: "Option 5",
        value: "option5",
        icon: (
          <UserAvatar
            id={String(Math.random() * 100)}
            name="John"
            size={20}
            online
          />
        ),
        showIconInChip: true,
      },
      {
        label: "Option 6",
        value: "option6",
        icon: (
          <UserAvatar
            id={String(Math.random() * 100)}
            name="Jane"
            size={20}
            online
          />
        ),
        showIconInChip: true,
      },
    ],
  },
] as GroupedSelectOption[];

export const Default: StoryFn<typeof Select> = Template.bind({});
export const MultiSelect: StoryFn<typeof Select> = MultipleSelectTemplate.bind(
  {}
);
export const Grouped: StoryFn<typeof Select> = GroupedTemplate.bind({});
export const GroupedMulti: StoryFn<typeof Select> = GroupedMultiTemplate.bind(
  {}
);

Default.args = {
  options,
  placeholder: "Select a value",
  label: "Select component",
  required: false,
  fullWidth: true,
  multiple: false,
  disabled: false,
  height: "40",
};

MultiSelect.args = {
  options,
  placeholder: "Select a value",
  label: "Select component",
  required: false,
  fullWidth: true,
  multiple: true,
  disabled: false,
  height: "40",
};

Grouped.args = {
  ...Default.args,
  options: groupedOptions,
};

GroupedMulti.args = {
  ...Default.args,
  options: groupedOptions,
  multiple: true,
};
