import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Logo,
  Lockup,
  Input,
  View,
  Monterey,
  Button,
  LinkButton,
  GhostButton,
  Text,
  useTheme,
} from './src';

const Swatch = ({ color, children }) => {
  return (
    <View
      sx={{
        marginBottom: 2,
        position: 'relative',
      }}
    >
      <View
        sx={{
          width: 20,
          height: 20,
          bg: color,
          boxShadow: 2,
        }}
      />
      <View sx={{ bg: 'white' }}>
        <Text variant="-2u">{children}</Text>
      </View>
    </View>
  );
};

const Swatches = ({ debug = true }) => {
  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' && debug ? (
                <View
                  key={JSON.stringify(code)}
                  sx={{ width: '100%', flexDirection: 'row' }}
                >
                  {Object.entries(code).map(([n, c]) => (
                    <View key={`${c}-${n}`} sx={{ padding: 1 }}>
                      <Swatch color={c}>
                        {color}.{n}
                      </Swatch>
                    </View>
                  ))}
                </View>
              ) : (
                <View
                  key={JSON.stringify(color)}
                  sx={{ padding: 1, width: '100%' }}
                >
                  <View>
                    <Swatch color={color}>{color}</Swatch>
                  </View>
                </View>
              ),
            )}
      </View>
    </View>
  );
};

const App = () => (
  <Monterey>
    <View>
      <View as="a" href="foo">
        dude
      </View>
      <Text color={['TEDRed.0', null, null, 'black']}>foo</Text>
      <Input
        adorned="after"
        name="q"
        placeholder="Search…"
        required
        variant={['onWhite', 'onBlack']}
        type="search"
      />
      <View sx={{ maxWidth: 20, margin: 4 }}>
        <Logo />
      </View>
      <View sx={{ maxWidth: 90, margin: 4 }}>
        <Lockup />
      </View>
      <View sx={{ paddingX: 2, paddingY: 1 }}>
        <Button size="md">lg</Button>
      </View>
      <View sx={{ paddingX: 2, paddingY: 1 }}>
        <Button>normal</Button>
      </View>
      <View sx={{ paddingX: 2, paddingY: 1 }}>
        <Button size="sm">sm</Button>
      </View>

      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <Button variant="primary">Primary</Button>
      </View>

      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <Button variant="alt">alternative</Button>
      </View>

      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <GhostButton>ghost</GhostButton>
      </View>

      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <GhostButton variant="primary">ghost primary</GhostButton>
      </View>

      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <GhostButton variant="alt">ghost alt</GhostButton>
      </View>

      <View
        sx={{
          display: 'flex',
          backgroundColor: 'black',
          padding: '5px 10px',
        }}
      >
        <GhostButton variant="light">ghost</GhostButton>
      </View>
      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <LinkButton>normal</LinkButton>
      </View>
      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <LinkButton variant="primary">primary</LinkButton>
      </View>
      <View sx={{ display: 'flex', padding: '5px 10px' }}>
        <LinkButton variant="alt">alt</LinkButton>
      </View>
      <View sx={{ padding: 1 }}>
        <View>
          <Text>default</Text>
        </View>
        <View>
          <Text variant="-2r">-2r</Text>
        </View>
        <View>
          <Text variant="-2u">-2u</Text>
        </View>
        <View>
          <Text variant="-1r">-1r</Text>
        </View>
        <View>
          <Text variant="-1b">-1b</Text>
        </View>
        <View>
          <Text variant="1r">1r</Text>
        </View>
        <View>
          <Text variant="1b">1b</Text>
        </View>
        <View>
          <Text variant="2r">2r</Text>
        </View>
        <View>
          <Text variant="2b">2b</Text>
        </View>
        <View>
          <Text variant="3">3</Text>
        </View>
        <View>
          <Text variant="4">4</Text>
        </View>
        <View>
          <Text variant="5">5</Text>
        </View>
        <View>
          <Text variant="6">6</Text>
        </View>
      </View>
      <View>
        <Text as="h2" variant="6">
          Inputs
        </Text>
        <View>
          <Input type="text" variant="onWhite" />
        </View>
      </View>
      <Swatches />
    </View>
  </Monterey>
);

const container = document.body;

ReactDOM.render(<App />, container);