import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {styled} from '@storybook/theming';
import {StoryVariantTable} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';

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

import CardRadioGroup from './CardRadioGroup';
import CardRadioGroupA11y from './stories/CardRadioGroup.a11y.mdx';
import CardCustomisation from './stories/CardCustomisation.mdx';

<Meta
  title="Components/CardRadioGroup"
  component={CardRadioGroup}
  subcomponents={{
    Item: CardRadioGroup.Item,
    Indicator: CardRadioGroup.Indicator,
  }}
/>

<PageHeader>CardRadioGroup</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 => (
      <CardRadioGroup {...args}>
        <CardRadioGroup.Item value="default" width="150px" height="150px">
          <CardRadioGroup.Indicator slot="top-left" />
          <Flex justifyContent="center" alignItems="center" fullHeight>
            <Text color="text-gray-50" size="xsmall" weight="bold">
              Placeholder
            </Text>
          </Flex>
        </CardRadioGroup.Item>
      </CardRadioGroup>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Variants

#### Solid

<Canvas>
  <Story
    name="Solid"
    decorators={[
      Story => (
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-evenly',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => (
      <CardRadioGroup defaultValue="anatomy" wrap="wrap">
        <Flex
          flex="1"
          justifyContent="center"
          alignItems="center"
          gap="s"
          direction="column"
          style={{padding: 96}}
        >
          <Headline color="text-black" size="small" extraBold>
            DARK
          </Headline>
          <CardRadioGroup.Item
            value="anatomy"
            variant="solid"
            width="150px"
            height="214px"
            defaultChecked={true}
            style={{
              '--card-background-color': 'var(--blue-10)',
            }}
          >
            <CardRadioGroup.Indicator slot="top-left" />
            <Flex
              justifyContent="space-evenly"
              alignItems="center"
              fullHeight
              direction="column"
            >
              <SubjectIcon type="astronomy" />
              <Text color="text-black" size="small" weight="bold">
                Anatomy
              </Text>
            </Flex>
          </CardRadioGroup.Item>
        </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>
          <CardRadioGroup.Item
            value="statistics"
            variant="solid"
            width="150px"
            height="214px"
            defaultChecked={true}
            color="light"
            style={{
              '--card-background-color': 'var(--indigo-70)',
            }}
          >
            <CardRadioGroup.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_2.jpeg"
                  width="100%"
                  height="100%"
                  style={{objectFit: 'cover'}}
                />
              </div>
              <Flex flex="1" alignItems="center">
                <Text color="text-white" size="small" weight="bold">
                  Statistics
                </Text>
              </Flex>
            </Flex>
          </CardRadioGroup.Item>
        </Flex>
      </CardRadioGroup>
    )}
  </Story>
</Canvas>

#### Outline

<Canvas>
  <Story
    name="Outline"
    decorators={[
      Story => (
        <div
          style={{
            padding: 96,
            display: 'flex',
            justifyContent: 'space-evenly',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => (
      <CardRadioGroup defaultValue="tourism" wrap="wrap">
        <Flex
          flex="1"
          justifyContent="center"
          alignItems="center"
          gap="s"
          direction="column"
          style={{padding: 96}}
        >
          <Headline color="text-black" size="small" extraBold>
            DARK
          </Headline>
          <CardRadioGroup.Item
            value="tourism"
            width="150px"
            height="150px"
            defaultChecked={true}
          >
            <CardRadioGroup.Indicator slot="top-left" />
            <Flex
              justifyContent="center"
              alignItems="center"
              fullHeight
              direction="column"
              gap="s"
            >
              <SubjectIcon type="tourism" />
              <Text color="text-black" size="small" weight="bold">
                Tourism
              </Text>
            </Flex>
          </CardRadioGroup.Item>
        </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>{' '}
          <CardRadioGroup.Item
            value="environment"
            variant="outline"
            color="light"
            width="150px"
            height="150px"
            defaultChecked={true}
            style={{'--card-background-color': 'var(--green-70'}}
          >
            <CardRadioGroup.Indicator slot="top-left" />
            <Flex
              justifyContent="center"
              alignItems="center"
              fullHeight
              direction="column"
              gap="s"
            >
              <SubjectIcon type="environment" />
              <Text color="text-white" size="small" weight="bold">
                Environment
              </Text>
            </Flex>
          </CardRadioGroup.Item>
        </Flex>
      </CardRadioGroup>
    )}
  </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 => (
      <CardRadioGroup defaultValue="default" {...args}>
        <CardRadioGroup.Item value="default" width="150px" height="150px">
          <CardRadioGroup.Indicator slot="top-left" />
          <CardRadioGroup.Indicator slot="center-left" />
          <CardRadioGroup.Indicator slot="bottom-left" />
          <CardRadioGroup.Indicator slot="top-right" />
          <CardRadioGroup.Indicator slot="center-right" />
          <CardRadioGroup.Indicator slot="bottom-right" />
          <Flex justifyContent="center" alignItems="center" fullHeight>
            <Text color="text-gray-50" size="xsmall" weight="bold">
              Placeholder
            </Text>
          </Flex>
        </CardRadioGroup.Item>
      </CardRadioGroup>
    )}
  </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>
                    <CardRadioGroup defaultValue={checked ? 'default' : ''}>
                      <CardRadioGroup.Item
                        variant={variant}
                        width="120px"
                        height="64px"
                        disabled={states === 'disabled'}
                        invalid={states === 'error'}
                        value="default"
                      >
                        {indicator && (
                          <CardRadioGroup.Indicator slot="top-left" />
                        )}
                        <Flex
                          justifyContent="center"
                          alignItems="center"
                          fullHeight
                        >
                          <Text
                            color="text-gray-50"
                            size="xsmall"
                            weight="bold"
                          >
                            Placeholder
                          </Text>
                        </Flex>
                      </CardRadioGroup.Item>
                    </CardRadioGroup>
                  </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>
                    <CardRadioGroup defaultValue={checked ? 'default' : ''}>
                      <CardRadioGroup.Item
                        variant={variant}
                        color="light"
                        width="120px"
                        height="64px"
                        disabled={states === 'disabled'}
                        invalid={states === 'error'}
                        value="default"
                      >
                        {indicator && (
                          <CardRadioGroup.Indicator slot="top-left" />
                        )}
                        <Flex
                          justifyContent="center"
                          alignItems="center"
                          fullHeight
                        >
                          <Text
                            color="text-gray-50"
                            size="xsmall"
                            weight="bold"
                          >
                            Placeholder
                          </Text>
                        </Flex>
                      </CardRadioGroup.Item>
                    </CardRadioGroup>
                  </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 background

<Canvas>
  <Story
    name="Animation on hover"
    decorators={[
      Story => (
        <div
          style={{
            padding: 96,
            display: 'flex',
            justifyContent: 'center',
            flexWrap: 'wrap',
          }}
        >
          <Story />
        </div>
      ),
    ]}
  >
    {args => {
      const Image = styled.div`
        width: 105px;
        height: 100%;
        background-image: ${props =>
          props.src ? `url(${props.src})` : 'none'};
        background-size: 100%;
        background-position: center;
        transition: background-size 0.26s linear;
        .sg-card-interactive:hover &,
        .sg-card-interactive:focus-within & {
          background-size: 108%;
        }
      `;
      const ExtendedCardRadio = (value, label, image) => {
        return (
          <CardRadioGroup.Item
            {...args}
            style={{margin: 8}}
            width="270px"
            height="50px"
            variant="outline"
            id={value}
            value={value}
            onMouseEnter={() => {}}
            onMouseLeave={() => {}}
          >
            <CardRadioGroup.Indicator slot="center-left" />
            <Flex
              justifyContent="space-between"
              alignItems="center"
              fullHeight
              direction="row"
              gap="xxs"
              marginLeft="l"
            >
              <Text color="text-black" size="small" weight="bold">
                {label}
              </Text>
              <Image src={`images/${image}.png`} />
            </Flex>
          </CardRadioGroup.Item>
        );
      };
      return (
        <CardRadioGroup>
          {ExtendedCardRadio('student', 'I’m a Student', 'avatar_10')}
          {ExtendedCardRadio('parent', 'I’m a Parent', 'avatar_16')}
        </CardRadioGroup>
      );
    }}
  </Story>
</Canvas>

## Customisation

<CardCustomisation />

## Accessibility

<CardRadioGroupA11y />
