import Box from '@mui/material/Box';
import { ArgTypes, ComponentMeta, ComponentStory } from '@storybook/react';
import React, { useEffect, useState } from 'react';
import BillingOption from './billing-option';
import { BillingOptionProps } from './types';

const args: BillingOptionProps = {
  label: 'Text',
  badgeLabel: 'Text',
  checked: false,
  badgeColorObj: {
    backgroundColor: '#44D7B6',
    color: 'white'
  }
};
const argTypes: Partial<ArgTypes<BillingOptionProps>> = {};

export default {
  title: 'Right Side Bar Components/Payments',
  component: BillingOption,
  argTypes,
  args
} as ComponentMeta<typeof BillingOption>;

const Template: ComponentStory<typeof BillingOption> = args => {
  const [checked, setChecked] = useState(args.checked);

  useEffect(() => {
    setChecked(args.checked);
  }, [args.checked]);

  const handleClick = () => {
    return setChecked(!checked);
  };

  return <BillingOption {...args} checked={checked} onClick={handleClick} />;
};
export const Single = Template.bind({});
Single.storyName = 'BillingOption';
const options: Omit<BillingOptionProps, 'onChange' | 'checked'>[] = [
  {
    label: 'Some Option',
    badgeLabel: 'Active',
    badgeColorObj: {
      backgroundColor: '#44D7B6',
      color: 'white'
    }
  },
  {
    label: 'Different Option',
    badgeLabel: 'Inactive',
    badgeColorObj: {
      backgroundColor: '#d7447c',
      color: 'white'
    }
  },
  {
    label: 'Another Option',
    badgeLabel: 'Cool',
    badgeColorObj: {
      backgroundColor: '#d77f44',
      color: 'white'
    }
  }
];

export const BillingOptionMultiple = () => {
  const [checked, setChecked] = useState(options[0].label);

  return (
    <Box display="flex" gap="16px">
      {options.map(opt => (
        <BillingOption
          key={opt.label}
          {...opt}
          checked={opt.label === checked}
          onClick={() => setChecked(opt.label)}
        />
      ))}
    </Box>
  );
};