import * as React from 'react';
import { View, Text, useTheme } from '@tedconf/monterey';
import SpaceScale from './space/scale';

const Swatch = ({
  color,
  children,
}: {
  color: string;
  children: React.ReactNode;
}): React.ReactElement => {
  return (
    <View sx={{ display: 'inline-block', marginBottom: 2, boxShadow: 2 }}>
      <View
        sx={{
          width: 27,
          height: 23,
          bg: color,
        }}
      />
      <View
        sx={{
          padding: 2,
          bg: 'black',
          color: 'white',
          ...(color === 'black' && {
            bg: 'gray.0',
          }),
        }}
      >
        <Text variant="-2u">{children}</Text>
      </View>
    </View>
  );
};

const Swatches = (): React.ReactElement => {
  const theme = useTheme();
  return (
    <View>
      <View
        sx={{
          display: 'flex',
          flexDirection: 'column',
          flexWrap: 'wrap',
          marginBottom: 5,
        }}
      >
        {theme.colors &&
          Object.entries(theme.colors)
            .reverse()
            .map(([color, code]) =>
              typeof code === 'object' ? (
                <View
                  key={JSON.stringify(code)}
                  sx={{
                    width: '100%',
                    flexDirection: 'row',
                  }}
                >
                  {Object.entries(code).map(([n, c]) => (
                    <View
                      key={`${c}-${n}`}
                      sx={{
                        padding: 1,
                        display: 'inline-block',
                      }}
                    >
                      <Swatch color={c}>
                        {color}.{n}
                      </Swatch>
                    </View>
                  ))}
                </View>
              ) : (
                <View key={JSON.stringify(color)} sx={{ padding: 1 }}>
                  <View sx={{ display: 'inline-block' }}>
                    <Swatch color={color}>{color}</Swatch>
                  </View>
                </View>
              ),
            )}
      </View>
    </View>
  );
};

export default {
  title: 'Tokens',
};

export const Colors = (): React.ReactElement => <Swatches />;

Colors.story = {
  parameters: {},
};

export const Space = (): React.ReactElement => <SpaceScale />;

Space.story = {
  parameters: {},
};

export const Shadows = (): React.ReactElement => {
  const theme = useTheme();

  return (
    <React.Fragment>
      {Object.entries(theme.shadows).map(([k, v]) =>
        !Number.isNaN(Number(k)) ? (
          <View
            key={k}
            sx={{
              backgroundColor: 'white',
              color: 'black',
              padding: 4,
              marginX: 1,
              marginY: 7,
              boxShadow: k,
            }}
          >
            shadows.{k}
          </View>
        ) : null,
      )}
    </React.Fragment>
  );
};

Shadows.story = {
  parameters: {},
};

export const Breakpoints = (): React.ReactElement => {
  const theme = useTheme();

  return (
    <React.Fragment>
      {Object.entries(theme.mediaQueries).map(([k, v], i) => (
        <View
          key={k}
          sx={{
            backgroundColor: 'gray.1',
            color: 'white',
            padding: 4,
            marginY: 2,
            width: String(theme.breakpoints[i]),
          }}
        >
          <View sx={{ display: 'inline' }}>
            {k}: (
            <a href="https://styled-system.com/responsive-styles">
              <Text variant="-2u" color="TEDRed.0">
                responsive value index: {i}
              </Text>
            </a>
            , {String(theme.breakpoints[i])})
          </View>
        </View>
      ))}
    </React.Fragment>
  );
};

Breakpoints.story = {
  parameters: {},
};