import type { StoryObj } from '@storybook/react';
import { Flag } from '@wise/art';
import SelectOption, {
  SelectOptionProps,
  SelectOptionValue,
  SelectOptiopsSection,
} from './SelectOption';
import { Bank, BankTransfer, Beach, Briefcase, Card, Plane } from '@transferwise/icons';
import { Field } from '../field/Field';
import { lorem10 } from '../test-utils';
import AvatarView from '../avatarView';
import { Sentiment } from '../common';
import { useState } from 'react';

export default {
  title: 'Option/SelectOption',
  tags: ['autodocs'],
};

type Story = StoryObj<typeof SelectOption>;

type CustomData = { data?: string };

function cardPaymentMethod(index?: number): SelectOptionValue<CustomData> {
  return {
    media: <Card />,
    title: `Credit card ${index}`,
    content: (
      <>
        <div>Transfer the money to Wise using your bank account.</div>
        <div>0.32 GBP in fees, should arrive in seconds</div>
      </>
    ),
  };
}

const recentPaymentMethods: SelectOptionValue<CustomData>[] = [
  cardPaymentMethod(1),
  cardPaymentMethod(2),
];

const allOtherPaymentMethods: SelectOptionValue<CustomData>[] = [
  {
    media: <Flag code="gbp" />,
    title: 'Wise GBP balance',
    content: (
      <>
        <span>300 GBP available</span>
        <span>0 GBP in fees, should arrive in seconds</span>
      </>
    ),
    disabled: true,
    value: { data: lorem10 },
  },
  cardPaymentMethod(1),
  {
    media: <Card />,
    title: 'Debit card',
    content: (
      <>
        <span>Send from your Visa or Mastercard.</span>
        <span>0.74 GBP in fees, should arrive in seconds</span>
      </>
    ),
  },
  {
    media: <Bank />,
    title: 'Swift Transfer',
    content: (
      <>
        <span>Send money internationally. Your bank will charge you extra fees.</span>
        <span>0.32 GBP in fees, should arrive by Thursday</span>
      </>
    ),
  },
  {
    media: <BankTransfer />,
    title: 'Bank Transfer',
    content: (
      <>
        <span>Transfer the money to Wise using your bank account.</span>
        <span>0.32 GBP in fees, should arrive in seconds</span>
      </>
    ),
  },
  {
    media: <BankTransfer />,
    title: 'Withdraw from your U.S. bank account (ACH)',
    content: (
      <>
        <span>1.63 USD in total fees.</span>
        <span>
          Pay with ACH using the bank account you’ve connected to Wise. Should arrive in seconds.
        </span>
      </>
    ),
  },
  cardPaymentMethod(1),
  cardPaymentMethod(2),
  cardPaymentMethod(3),
  cardPaymentMethod(4),
  cardPaymentMethod(5),
  cardPaymentMethod(6),
];

const paymentMethods: SelectOptiopsSection<CustomData>[] = [
  {
    title: 'Recently used',
    options: recentPaymentMethods,
  },
  {
    title: 'Payment methods',
    options: allOtherPaymentMethods,
  },
];

const balances: SelectOptiopsSection[] = [
  {
    title: 'Jars',
    options: [
      {
        media: (
          <AvatarView
            badge={{ flagCode: 'usd' }}
            style={{ backgroundColor: 'var(--color-bright-pink)' }}
            name="Tim Cook"
          />
        ),
        title: 'Hawaii Holiday',
        content: 'Wise USD jar',
      },
      {
        media: (
          <AvatarView
            badge={{ flagCode: 'aed' }}
            style={{ backgroundColor: 'var(--color-bright-yellow)' }}
          >
            <Briefcase />
          </AvatarView>
        ),
        title: 'Emirates Business Trip',
        content: 'Wise AED jar',
      },
      {
        media: (
          <AvatarView
            badge={{ flagCode: 'jpy' }}
            style={{ backgroundColor: 'var(--color-bright-blue)' }}
          >
            <Plane />
          </AvatarView>
        ),
        title: 'Trip to Mars',
        content: 'Wise Jpy jar',
      },
    ],
  },
  {
    title: 'Balances',
    options: [
      {
        media: <Flag code="gbp" />,
        title: 'Wise GBP balance',
      },
      {
        media: <Flag code="eur" />,
        title: 'Wise EUR balance',
      },
    ],
  },
];

export const Basic: Story = {
  args: {
    placeholder: { title: 'No balance selected' },
    options: balances,
  },
  render: (args: SelectOptionProps) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [selected, setSelected] = useState<SelectOptionValue | undefined>(undefined);
    function onChange(value: SelectOptionValue): void {
      setSelected(value);
    }
    return (
      <div className="row">
        <div className="col-md-8 col-md-offset-2">
          <Field label="Balances">
            <SelectOption {...args} {...{ selected, onChange }} />
          </Field>
        </div>
      </div>
    );
  },
};

export const Variants: Story = {
  render: () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [selected, setSelected] = useState<SelectOptionValue<CustomData>>({
      ...paymentMethods[1].options[1],
      content: null,
    });
    function onChange(value: SelectOptionValue<CustomData>): void {
      setSelected({ ...value, content: null });
    }
    return (
      <div className="row">
        <div className="col-md-8 col-md-offset-2">
          <SelectOption<CustomData>
            className="d-block"
            aria-label="Choose one of payment methods"
            placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
            selected={selected}
            options={paymentMethods}
            onChange={onChange}
          />
        </div>

        <div className="col-md-8 col-md-offset-2">
          <Field label={<>Payment method</>}>
            <SelectOption<CustomData>
              aria-label="Choose one of payment methods"
              placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
              selected={selected}
              options={paymentMethods}
              onChange={onChange}
            />
          </Field>
        </div>

        <div className="col-md-8 col-md-offset-2">
          <Field
            label={<>Payment method</>}
            sentiment={Sentiment.NEGATIVE}
            message="Just an example of validation message"
          >
            <SelectOption<CustomData>
              aria-label="Choose one of payment methods"
              placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
              selected={selected}
              options={paymentMethods}
              onChange={onChange}
            />
          </Field>
        </div>

        <div className="col-md-8 col-md-offset-2">
          <Field
            label={<>Payment method</>}
            sentiment={Sentiment.NEGATIVE}
            message="Just an example of validation message"
          >
            <SelectOption<CustomData>
              aria-label="Choose one of payment methods"
              placeholder={{ title: 'No method selected', actionLabel: 'Select' }}
              options={paymentMethods}
              onChange={onChange}
            />
          </Field>
        </div>

        <div className="col-md-8 col-md-offset-2">
          <Field
            label={<>Payment method</>}
            sentiment={Sentiment.NEGATIVE}
            message="Example of disabled select option"
          >
            <SelectOption<CustomData>
              disabled
              placeholder={{ title: 'No method selected' }}
              options={paymentMethods}
              onChange={onChange}
            />
          </Field>
        </div>
      </div>
    );
  },
};
