import React, { ReactNode } from 'react';
import type { Meta, StoryObj } from '@storybook/react-webpack5';
import clsx from 'clsx';
import AvatarView from '../avatarView';
import Tooltip from '../tooltip';
import IconButton from '../iconButton';
import Body from '../body';

const meta: Meta = {
  title: 'Foundations/tokens',
  tags: ['!autodocs', '!manifest'],
};

export default meta;

type Story = StoryObj;

export const Colors: Story = {
  render: () => {
    return (
      <Body>
        {colorTokens.map((token) => (
          <ColorToken key={token} token={token} className="m-b-2" />
        ))}
      </Body>
    );
  },
};

const colorTokens = [
  '--color-content-primary',
  '--color-bright-yellow',
  '--color-bright-orange',
  '--color-dark-purple',
  '--color-dark-gold',
  '--color-bright-blue',
  '--color-dark-charcoal',
  '--color-white',
  '--color-black',
  '--color-bright-green',
  '--color-forest-green',
  '--color-bright-pink',
  '--color-dark-maroon',
  '--color-content-primary',
  '--color-content-secondary',
  '--color-content-tertiary',
  '--color-content-link',
  '--color-content-link-hover',
  '--color-content-link-active',
  '--color-interactive-control',
  '--color-interactive-control-hover',
  '--color-interactive-control-active',
  '--color-interactive-primary',
  '--color-interactive-primary-hover',
  '--color-interactive-primary-active',
  '--color-interactive-secondary',
  '--color-interactive-secondary-hover',
  '--color-interactive-secondary-active',
  '--color-interactive-accent',
  '--color-interactive-accent-hover',
  '--color-interactive-accent-active',
  '--color-interactive-contrast',
  '--color-interactive-contrast-hover',
  '--color-interactive-contrast-active',
  '--color-interactive-neutral',
  '--color-interactive-neutral-hover',
  '--color-interactive-neutral-active',
  '--color-border-neutral',
  '--color-border-overlay',
  '--color-background-screen',
  '--color-background-screen-hover',
  '--color-background-screen-active',
  '--color-background-elevated',
  '--color-background-neutral',
  '--color-background-neutral-hover',
  '--color-background-neutral-active',
  '--color-background-overlay',
  '--color-background-surface',
  '--color-sentiment-negative',
  '--color-sentiment-negative-hover',
  '--color-sentiment-negative-active',
  '--color-sentiment-negative-primary',
  '--color-sentiment-negative-primary-hover',
  '--color-sentiment-negative-primary-active',
  '--color-sentiment-negative-secondary',
  '--color-sentiment-negative-secondary-hover',
  '--color-sentiment-negative-secondary-active',
  '--color-sentiment-positive',
  '--color-sentiment-positive-hover',
  '--color-sentiment-positive-active',
  '--color-sentiment-positive-primary',
  '--color-sentiment-positive-primary-hover',
  '--color-sentiment-positive-primary-active',
  '--color-sentiment-positive-secondary',
  '--color-sentiment-positive-secondary-hover',
  '--color-sentiment-positive-secondary-active',
  '--color-sentiment-warning',
  '--color-sentiment-warning-hover',
  '--color-sentiment-warning-active',
  '--color-sentiment-warning-primary',
  '--color-sentiment-warning-primary-hover',
  '--color-sentiment-warning-primary-active',
  '--color-sentiment-warning-secondary',
  '--color-sentiment-warning-secondary-hover',
  '--color-sentiment-warning-secondary-active',
  '--color-sentiment-warning-content',
  '--color-sentiment-warning-content-hover',
  '--color-sentiment-warning-content-active',
  '--color-contrast',
  '--color-light',
  '--color-dark',
  '--color-contrast-overlay',
  '--color-contrast-theme',
];

function ColorToken(props: { token: string; className?: string }) {
  const color = `var(${props.token})`;
  const [tooltipLabel, setTooltipLabel] = React.useState<ReactNode>('Copy Token Name');
  return (
    <div className={clsx('d-flex', 'align-items-center', props.className)}>
      <IconButton
        aria-label="Copy color"
        size={72}
        className="m-r-2"
        onClick={async () => {
          await navigator.clipboard.writeText(color);
          setTooltipLabel('Copied!');
        }}
      >
        <Tooltip label={<Body type="body-large-bold">{tooltipLabel}</Body>} position="top">
          <AvatarView
            size={72}
            style={{ backgroundColor: color, border: 'solid 1px var(--color-border-neutral)' }}
          >
            {null}
          </AvatarView>
        </Tooltip>
      </IconButton>
      <code className="m-l-2">{props.token}</code>
    </div>
  );
}
