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

import Chip from './Chip.component';
import { IChip } from './Chip.interface';
import { colors } from '../../../styles/variables';

export default {
  title: 'Backlog/Chip',
  component: Chip,
  argTypes: {},
} as Meta;

interface ChipOnClickProps {
  children: React.ReactNode;
  disabled?: boolean;
}

const ChipOnClick: React.FC<ChipOnClickProps> = ({ children, disabled = false }) => {
  const [isSelected, setIsSelected] = useState(false);
  const handleClick = () => setIsSelected(!isSelected);

  return (
    <Chip selected={isSelected} onClick={handleClick} disabled={disabled}>
      {children}
    </Chip>
  );
};

const Template: Story<Partial<IChip>> = (args) => (
  <div
    style={{
      backgroundColor: colors.gray90,
      display: 'flex',
      gap: '8px',
      padding: '16px',
    }}
  >
    <ChipOnClick disabled={true}>Blue</ChipOnClick>
    <ChipOnClick>Gray</ChipOnClick>
    <ChipOnClick>Pink</ChipOnClick>
    <ChipOnClick>Gold</ChipOnClick>
    <ChipOnClick>Green</ChipOnClick>
    <ChipOnClick>Green</ChipOnClick>
  </div>
);

export const Simple = Template.bind({});
Simple.args = {};