/* eslint-disable react/jsx-key */
import { Meta, StoryObj } from '@storybook/react';
import {
  Camera,
  Convert,
  FastFlag,
  Freeze,
  Graph,
  Money,
  Plane,
  PlusCircle,
  QrCode,
  Rewards,
  Target,
  Team,
  Transport,
  Wallet,
  Water,
} from '@transferwise/icons';
import AvatarView, { AvatarViewProps } from '.';
import { Flag } from '@wise/art';
import { getBrandColorFromSeed, getInitials } from '../common';
import Display from '../display';

export default {
  title: 'Content/AvatarView',
} satisfies Meta<typeof AvatarView>;

type Story = StoryObj<typeof AvatarView>;

const profileName1 = 'Wolter White';
const profileName2 = 'Tyler Durden';
const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];

export const Selected: Story = {
  tags: ['autodocs'],
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
        }}
      >
        {sizes.map((size) => (
          <AvatarView key={size} size={size} selected interactive>
            <Freeze />
          </AvatarView>
        ))}
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            selected
            interactive
          />
        ))}
      </div>
    );
  },
};

export const Notification: Story = {
  tags: ['autodocs'],
  render: () => (
    <div
      style={{
        gap: '1em',
        display: 'grid',
        justifyContent: 'space-between',
        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
      }}
    >
      {sizes.map((size) => (
        <AvatarView key={size} size={size} notification>
          <Freeze />
        </AvatarView>
      ))}
      {sizes.map((size) => (
        <AvatarView key={size} size={size} notification interactive>
          <Freeze />
        </AvatarView>
      ))}
      {sizes.map((size) => (
        <AvatarView
          key={size}
          size={size}
          imgSrc="../avatar-rectangle-fox.webp"
          notification
          interactive
        />
      ))}
    </div>
  ),
};

export const Badge: Story = {
  tags: ['autodocs'],
  render: () => {
    const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
    const icons = [
      <Plane />,
      <QrCode />,
      <Target />,
      <Transport />,
      <Wallet />,
      <Water />,
      <Team />,
    ];
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(7, min-content)',
        }}
      >
        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ flagCode: currencies[index] }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-rectangle-fox.webp"
            badge={{ imgSrc: '../tapestry-01.png' }}
          />
        ))}

        {sizes.map((size, index) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ imgSrc: '../tapestry-01.png' }}
          />
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ imgSrc: '../tapestry-01.png' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ status: 'warning' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ status: 'neutral' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ status: 'negative' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ icon: <FastFlag /> }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ type: 'reference' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size, index) => (
          <AvatarView key={size} size={size} badge={{ type: 'action' }}>
            {icons[index]}
          </AvatarView>
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'action', icon: <Camera /> }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ type: 'reference', icon: <Convert /> }}
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            badge={{ icon: <Convert /> }}
          />
        ))}
      </div>
    );
  },
};

export const Images: Story = {
  tags: ['autodocs'],
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(7, min-content)',
        }}
      >
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            interactive
            imgSrc="../avatar-square-dude.webp"
            name="Test Name"
            type="business"
          />
        ))}
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            name="Test Name"
            type="business"
          />
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive>
            <Flag code="JPY" intrinsicSize={size} />
          </AvatarView>
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size}>
            <Flag code="JPY" intrinsicSize={size} />
          </AvatarView>
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} interactive imgSrc="../avatar-rectangle-fox.webp" size={size} />
        ))}
        {sizes.map((size) => (
          <AvatarView key={size} size={size} imgSrc="../avatar-rectangle-fox.webp" />
        ))}
      </div>
    );
  },
};

export const Profiles: Story = {
  tags: ['autodocs'],
  render: () => {
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(7, min-content)',
        }}
      >
        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            imgSrc="../avatar-square-dude.webp"
            name="Test Name"
            type="business"
          />
        ))}

        {sizes.map((size) => (
          <AvatarView
            key={size}
            size={size}
            interactive
            imgSrc="../avatar-square-dude.webp"
            name="Test Name"
            type="business"
          />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} name="Test Name" />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive name="Test Name" />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} type="business" />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive type="business" />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} />
        ))}

        {sizes.map((size) => (
          <AvatarView key={size} size={size} interactive />
        ))}
      </div>
    );
  },
};

export const ProfileBrokenImageFallback: Story = {
  render: () => (
    <>
      <AvatarView imgSrc="../img-wrong-url.lol" />
      <AvatarView imgSrc="../img-wrong-url.lol" type="business" />
      <AvatarView imgSrc="../img-wrong-url.lol" type="business" name="D D" />
    </>
  ),
};

export const EdgeInstaces: Story = {
  tags: ['autodocs'],
  render: () => {
    const css = `.custom-variant {
      border: 1px dashed var(--color-border-neutral);
    }`;
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(2, min-content)',
        }}
      >
        <style>{css}</style>
        {/* <Body>- Custom colors</Body> */}
        <AvatarView
          interactive
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: 'var(--color-bright-orange)' }}
        >
          <Money />
        </AvatarView>
        <AvatarView
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
        >
          <Money />
        </AvatarView>
        {/* <Body>- Add example with dashed avatar as in shared balances</Body> */}
        <AvatarView interactive className="custom-variant">
          <PlusCircle />
        </AvatarView>
        <AvatarView interactive className="custom-variant">
          {null}
        </AvatarView>
        {/* <Body> - Add example custom backgrounds as in account summary (https://wise.com/account-summary)</Body> */}
        <AvatarView style={{ backgroundColor: 'rgb(203, 217, 195)' }}>
          <span style={{ color: 'rgb(22, 51, 0)' }}>
            <Graph />
          </span>
        </AvatarView>
        <AvatarView interactive style={{ backgroundColor: 'rgb(203, 217, 195)' }}>
          <span style={{ color: 'rgb(22, 51, 0)' }}>
            <Graph />
          </span>
        </AvatarView>
        <AvatarView style={{ backgroundColor: 'rgb(22, 51, 0)' }}>
          <span style={{ color: 'rgb(203, 217, 195)' }}>
            <Rewards />
          </span>
        </AvatarView>
        <AvatarView interactive style={{ backgroundColor: 'rgb(22, 51, 0)' }}>
          <span style={{ color: 'rgb(203, 217, 195)' }}>
            <Rewards />
          </span>
        </AvatarView>
        {/* <Body>- Add example Wise Sand + custom background from hash</Body> */}
        <AvatarView
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
        >
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView
          interactive
          badge={{ flagCode: 'EU' }}
          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
        >
          <Display>{getInitials(profileName1)}</Display>
        </AvatarView>
        <AvatarView>9+</AvatarView>
        <AvatarView interactive>5+</AvatarView>
      </div>
    );
  },
};
