import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariantTable} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';
import {useRive, useStateMachineInput} from '@rive-app/react-canvas';

import Flex from '../flex/Flex';
import Text from '../text/Text';
import Headline from '../text/Headline';
import SubjectIcon from '../subject-icons/SubjectIcon';

import CardCheckbox from './CardCheckbox';
import CardCheckboxA11y from './stories/CardCheckbox.a11y.mdx';
import CardCustomisation from './stories/CardCustomisation.mdx';

<Meta
  title="Components/CardCheckbox"
  component={CardCheckbox}
  subcomponents={{Indicator: CardCheckbox.Indicator}}
/>

<PageHeader>CardCheckbox</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story
    name="Default"
    decorators={[
      Story => (
        <div
          style={{
            background: 'var(--gray-30)',
            padding: 96,
            display: 'flex',
            justifyContent: 'space-evenly',
          }}
        >
          <Story />
        </div>
      ),
    ]}
    args={{
      defaultChecked: true,
    }}
  >
    {args => (
      <CardCheckbox {...args} width="150px" height="150px">
        <CardCheckbox.Indicator slot="top-left" />
        <Flex justifyContent="center" alignItems="center" fullHeight>
          <Text color="text-gray-50" size="xsmall" weight="bold">
            Placeholder
          </Text>
        </Flex>
      </CardCheckbox>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Variants

#### Solid

<Canvas>
  <Story
    name="Solid"
    decorators={[
      Story => (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-evenly',
            flexWrap: 'wrap',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => (
      <>
        <Flex
          flex="1"
          justifyContent="center"
          alignItems="center"
          gap="s"
          direction="column"
          style={{padding: 96}}
        >
          <Headline color="text-black" size="small" extraBold>
            DARK
          </Headline>
          <CardCheckbox
            {...args}
            variant="solid"
            width="150px"
            height="214px"
            defaultChecked={true}
            style={{
              '--card-background-color': 'var(--green-10)',
            }}
          >
            <CardCheckbox.Indicator slot="top-left" />
            <Flex
              justifyContent="space-evenly"
              alignItems="center"
              fullHeight
              direction="column"
            >
              <img src="images/calipers.svg" width="58" />
              <Text color="text-black" size="small" weight="bold">
                Knowledge
              </Text>
            </Flex>
          </CardCheckbox>
        </Flex>
        <Flex
          flex="1"
          justifyContent="center"
          alignItems="center"
          gap="s"
          direction="column"
          style={{background: 'var(--gray-20)', padding: 96}}
        >
          <Headline color="text-black" size="small" extraBold>
            LIGHT
          </Headline>
          <CardCheckbox
            {...args}
            variant="solid"
            width="150px"
            height="214px"
            defaultChecked={true}
            color="light"
            style={{
              '--card-background-color': 'var(--green-70)',
            }}
          >
            <CardCheckbox.Indicator slot="top-left" />
            <Flex
              justifyContent="space-between"
              alignItems="center"
              fullHeight
              direction="column"
              gap="none"
            >
              <div style={{width: 150, height: 150}}>
                <img
                  src="images/image_1.jpeg"
                  width="100%"
                  height="100%"
                  style={{objectFit: 'cover'}}
                />
              </div>
              <Flex flex="1" alignItems="center">
                <Text color="text-white" size="small" weight="bold">
                  High School
                </Text>
              </Flex>
            </Flex>
          </CardCheckbox>
        </Flex>
      </>
    )}
  </Story>
</Canvas>

#### Outline

<Canvas>
  <Story
    name="Outline"
    decorators={[
      Story => (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-evenly',
            flexWrap: 'wrap',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => (
      <>
        <Flex
          flex="1"
          justifyContent="center"
          alignItems="center"
          gap="s"
          direction="column"
          style={{padding: 96}}
        >
          <Headline color="text-black" size="small" extraBold>
            DARK
          </Headline>
          <CardCheckbox
            {...args}
            variant="outline"
            width="150px"
            height="150px"
            defaultChecked={true}
          >
            <CardCheckbox.Indicator slot="top-left" />
            <Flex
              justifyContent="center"
              alignItems="center"
              fullHeight
              direction="column"
              gap="s"
            >
              <SubjectIcon type="philosophy" />
              <Text color="text-black" size="small" weight="bold">
                Philosophy
              </Text>
            </Flex>
          </CardCheckbox>
        </Flex>
        <Flex
          flex="1"
          justifyContent="center"
          alignItems="center"
          gap="s"
          direction="column"
          style={{background: 'var(--gray-20)', padding: 96}}
        >
          <Headline color="text-black" size="small" extraBold>
            LIGHT
          </Headline>
          <CardCheckbox
            {...args}
            variant="outline"
            width="150px"
            height="150px"
            defaultChecked={true}
            color="light"
            style={{
              '--card-background-color': 'var(--indigo-60)',
            }}
          >
            <CardCheckbox.Indicator slot="top-left" />
            <Flex
              justifyContent="center"
              alignItems="center"
              fullHeight
              direction="column"
              gap="s"
            >
              <SubjectIcon type="geometry" />
              <Text color="text-white" size="small" weight="bold">
                Geometry
              </Text>
            </Flex>
          </CardCheckbox>
        </Flex>
      </>
    )}
  </Story>
</Canvas>

### Indicator position

<Canvas>
  <Story
    name="Indicator position"
    decorators={[
      Story => (
        <div
          style={{
            background: 'var(--gray-30)',
            padding: 96,
            display: 'flex',
            justifyContent: 'space-evenly',
            flexWrap: 'wrap',
            gap: 32,
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => (
      <CardCheckbox
        {...args}
        width="150px"
        height="150px"
        defaultChecked={true}
      >
        <CardCheckbox.Indicator slot="top-left" />
        <CardCheckbox.Indicator slot="center-left" />
        <CardCheckbox.Indicator slot="bottom-left" />
        <CardCheckbox.Indicator slot="top-right" />
        <CardCheckbox.Indicator slot="center-right" />
        <CardCheckbox.Indicator slot="bottom-right" />
        <Flex justifyContent="center" alignItems="center" fullHeight>
          <Text color="text-gray-50" size="xsmall" weight="bold">
            Placeholder
          </Text>
        </Flex>
      </CardCheckbox>
    )}
  </Story>
</Canvas>

### States

#### Dark

<Canvas>
  <Story name="States Dark">
    {args => (
      <StoryVariantTable>
        <thead>
          <tr>
            <th />
            <th>
              <Text weight="bold" transform="capitalize" size="medium">
                default
              </Text>
            </th>
            <th>
              <Text weight="bold" transform="capitalize" size="medium">
                disabled
              </Text>
            </th>
            <th>
              <Text weight="bold" transform="capitalize" size="medium">
                error
              </Text>
            </th>
          </tr>
        </thead>
        <tbody>
          {['outline', 'solid'].map(variant => {
            return [false, true].map(indicator => {
              return [false, true].map(checked => {
                const states = ['default', 'disabled', 'error'].map(states => (
                  <td>
                    <CardCheckbox
                      {...args}
                      variant={variant}
                      width="120px"
                      height="64px"
                      disabled={states === 'disabled'}
                      invalid={states === 'error'}
                      defaultChecked={checked}
                    >
                      {indicator && <CardCheckbox.Indicator slot="top-left" />}
                      <Flex
                        justifyContent="center"
                        alignItems="center"
                        fullHeight
                      >
                        <Text color="text-gray-50" size="xsmall" weight="bold">
                          Placeholder
                        </Text>
                      </Flex>
                    </CardCheckbox>
                  </td>
                ));
                return (
                  <tr>
                    <td>
                      <Text weight="bold" size="small" transform="capitalize">
                        {variant}
                        <br />
                        {checked ? 'checked' : 'unchecked'}
                        <br />
                        {indicator
                          ? 'with indicator'
                          : 'without indicator'}{' '}
                        <br />
                      </Text>
                    </td>
                    {states}
                  </tr>
                );
              });
            });
          })}
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

#### Light

<Canvas>
  <Story
    name="States Light"
    decorators={[
      Story => (
        <div
          style={{
            background: 'var(--black)',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => (
      <StoryVariantTable>
        <thead>
          <tr>
            <th />
            <th>
              <Text
                color="text-white"
                weight="bold"
                transform="capitalize"
                size="medium"
              >
                default
              </Text>
            </th>
            <th>
              <Text
                color="text-white"
                weight="bold"
                transform="capitalize"
                size="medium"
              >
                disabled
              </Text>
            </th>
            <th>
              <Text
                color="text-white"
                weight="bold"
                transform="capitalize"
                size="medium"
              >
                error
              </Text>
            </th>
          </tr>
        </thead>
        <tbody>
          {['outline', 'solid'].map(variant => {
            return [false, true].map(indicator => {
              return [false, true].map(checked => {
                const states = ['default', 'disabled', 'error'].map(states => (
                  <td>
                    <CardCheckbox
                      {...args}
                      variant={variant}
                      width="120px"
                      height="64px"
                      disabled={states === 'disabled'}
                      invalid={states === 'error'}
                      defaultChecked={checked}
                      color="light"
                    >
                      {indicator && <CardCheckbox.Indicator slot="top-left" />}
                      <Flex
                        justifyContent="center"
                        alignItems="center"
                        fullHeight
                      >
                        <Text color="text-gray-50" size="xsmall" weight="bold">
                          Placeholder
                        </Text>
                      </Flex>
                    </CardCheckbox>
                  </td>
                ));
                return (
                  <tr>
                    <td>
                      <Text
                        color="text-white"
                        weight="bold"
                        size="small"
                        transform="capitalize"
                      >
                        {variant}
                        <br />
                        {checked ? 'checked' : 'unchecked'}
                        <br />
                        {indicator
                          ? 'with indicator'
                          : 'without indicator'}{' '}
                        <br />
                      </Text>
                    </td>
                    {states}
                  </tr>
                );
              });
            });
          })}
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Examples

#### Animated icons

<Canvas>
  <Story
    name="Animation on hover"
    decorators={[
      Story => (
        <div
          style={{
            background: 'var(--indigo-20)',
            padding: 96,
            display: 'flex',
            justifyContent: 'space-evenly',
            flexWrap: 'wrap',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => {
      const AnimatedCard = (filename, label) => {
        const STATE_MACHINE_NAME = 'State Machine 1';
        const {rive, RiveComponent} = useRive({
          src: `animations/${filename}.riv`,
          autoplay: true,
          stateMachines: STATE_MACHINE_NAME,
        });
        const isHoverInput = useStateMachineInput(
          rive,
          STATE_MACHINE_NAME,
          'Hover',
          false
        );
        return (
          <CardCheckbox
            {...args}
            style={{margin: 16}}
            width="150px"
            height="150px"
            variant="solid"
            onMouseEnter={() => {
              isHoverInput.value = true;
            }}
            onMouseLeave={() => {
              isHoverInput.value = false;
            }}
          >
            <Flex
              justifyContent="center"
              alignItems="center"
              fullHeight
              direction="column"
              gap="m"
            >
              <div style={{width: 64, height: 64}}>
                <RiveComponent />
              </div>
              <Text color="text-text-black" size="small" weight="bold">
                {label}
              </Text>
            </Flex>
          </CardCheckbox>
        );
      };
      return (
        <>
          {AnimatedCard('mathematics_animated_subject_icon', 'mathematics')}
          {AnimatedCard('physics_animated_subject_icon', 'physics')}
          {AnimatedCard('mathematics_animated_subject_icon', 'mathematics')}
          {AnimatedCard('physics_animated_subject_icon', 'physics')}
        </>
      );
    }}
  </Story>
</Canvas>

## Customisation

<CardCustomisation />

## Accessibility

<CardCheckboxA11y />
