import { Meta, Story } from '@storybook/react';
import React, { useState } from 'react';

import { ChainIcon } from '../Icons';
import { Select, SelectProps } from '.';

export default {
  component: Select,
  title: 'Components/Select',
} as Meta;

type OptionType = {
  icon?: React.ReactNode;
  id: number;
  isDisabled?: boolean;
  name: string;
};

const Template: Story<SelectProps<OptionType>> = (args) => {
  const [selectedOptionId, setSelectedOptionId] = useState<OptionType['id'] | null>(null);

  return (
    <Select {...args} selectedOptionId={selectedOptionId} onOptionChange={setSelectedOptionId} />
  );
};

export const Default = Template.bind({});
Default.args = {
  label: 'Select an option',
  options: [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { icon: <ChainIcon chainId={1} />, id: 3, name: 'Option 3' },
  ],
};

export const DisabledOptions = Template.bind({});
DisabledOptions.args = {
  label: 'Select an option',
  options: [
    { id: 1, name: 'Option 1' },
    { id: 2, isDisabled: true, name: 'Option 2' },
    { icon: <ChainIcon chainId={1} />, id: 3, name: 'Option 3' },
  ],
  tooltip: 'Tooltip content here',
};

export const ApprovingState = Template.bind({});
ApprovingState.args = {
  approving: true,
  label: 'Select an option',
  options: [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { icon: <ChainIcon chainId={1} />, id: 3, name: 'Option 3' },
  ],
  tooltip: 'Tooltip content here',
};

export const WithCustomLabel = Template.bind({});
WithCustomLabel.args = {
  label: 'Custom label',
  labelColorToken: 'primary500',
  labelTypographyToken: 'bodyXSmallMedium',
  options: [
    { id: 1, name: 'Option 1' },
    { id: 2, name: 'Option 2' },
    { icon: <ChainIcon chainId={1} />, id: 3, name: 'Option 3' },
  ],
  selectBoxStyles: { backgroundColor: 'purple', width: 100 },
  tooltip: 'Tooltip content here',
};