import React from 'react';
import instructions from './instructions.md';

import { Box } from '../src';
import { Colors, DefaultTheme } from '../src/styles/values';
import { Heading, Subtitle, Text } from '../src/Typography';

export default {
  title: 'Theme',
  parameters: {
    notes: {
      instructions,
    },
  },
};

export const Theme = () => {
  return (
    <div>
      <a href="https://www.venturatravel.org/">
        <p align="center">
          <img
            src="https://www.venturatravel.org/hubfs/Logo-colour.svg"
            width="350"
            alt="logo"
          />
        </p>
      </a>

      <p align="center">
        <strong>
          Visit{' '}
          <a aria-label="Ventura Travel" href="https://www.venturatravel.org/">
            Ventura Travel
          </a>
        </strong>
      </p>
      <h2>Looking for a Ventura UI Web Component?</h2>
      <p>
        You will be able to find on this page all the shared styles in Ventura
        Products. (Check Notes)
      </p>
    </div>
  );
};

Theme.story = {
  name: 'Introduction',
};

export const Typography = () => {
  const small = (text) => (
    <small
      style={{
        color: 'rgba(0, 0, 0, 0.3)',
        margin: '10px, 0',
        textTransform: 'uppercase',
      }}
    >
      {text}
    </small>
  );

  return (
    <div>
      <br />
      {small('Heading H1')}
      <Heading as="h1">Top experiences with Ventura Travel</Heading>

      <br />
      <br />
      {small('Heading H2')}
      <Heading as="h2">Top experiences with Ventura Travel</Heading>

      <br />
      <br />
      {small('Heading H3')}
      <Heading as="h3">Top experiences with Ventura Travel</Heading>

      <br />
      <br />
      {small('Heading H4')}
      <Heading as="h4">Top experiences with Ventura Travel</Heading>

      <br />
      <br />
      {small('Heading H5')}
      <Heading as="h5">Top experiences with Ventura Travel</Heading>

      <br />
      <br />
      {small('Heading H6')}
      <Heading as="h6">Top experiences with Ventura Travel</Heading>

      <br />
      <br />
      {small('Subtitle')}
      <Subtitle>Top experiences with Ventura Travel</Subtitle>

      <br />
      <br />
      {small('Special Subtitle ')}
      <Subtitle variation="special">
        Top experiences with Ventura Travel
      </Subtitle>

      <br />
      <br />
      {small('Body')}
      <Text>Top experiences with Ventura Travel</Text>
    </div>
  );
};

export const FontWeights = () => {
  return (
    <div>
      <h1>Font Weights</h1>
      <div style={{ fontSize: '20px' }}>
        <Box fontWeight={DefaultTheme.fontWeights.black}>Black</Box>
        <br />
        <Box fontWeight={DefaultTheme.fontWeights.bold}>Bold</Box>
        <br />
        <Box fontWeight={DefaultTheme.fontWeights.semiBold}>Semi Bold</Box>
        <br />
        <Box fontWeight={DefaultTheme.fontWeights.regular}>Regular</Box>
        <br />
        <Box fontWeight={DefaultTheme.fontWeights.normal}>Normal</Box>
        <br />
      </div>
    </div>
  );
};

export const colorPalette = () => {
  const palette = (values) =>
    Object.entries(values).map(([name, color]) => {
      if (name !== 'tint' && name !== 'gray') {
        return (
          <tr key={color}>
            <td style={{ borderBottom: '1px solid #e4e4e4', padding: '1em' }}>
              <strong>Name: {name}</strong>
              <br />
              <small>Code: {color}</small>
            </td>
            <td style={{ borderBottom: '1px solid #e4e4e4', padding: '1em' }}>
              <div
                style={{
                  width: '50px',
                  height: '50px',
                  borderRadius: '50%',
                  display: 'block',
                  background: color,
                }}
              />
            </td>
            <br />
          </tr>
        );
      }
      return false;
    });

  return (
    <div>
      <h1>Colors</h1>
      <table
        style={{
          border: '1px solid #e4e4e4',
          marginBottom: '1em',
          marginTop: '1em',
          width: '100%',
        }}
      >
        {palette(Colors)}
      </table>
      <h1>Grays</h1>
      <table
        style={{
          border: '1px solid #e4e4e4',
          marginBottom: '1em',
          marginTop: '1em',
          width: '100%',
        }}
      >
        {palette(Colors.gray)}
      </table>
      <h1>Tints</h1>
      <table
        style={{
          border: '1px solid #e4e4e4',
          marginBottom: '1em',
          marginTop: '1em',
          width: '100%',
        }}
      >
        {palette(Colors.tint)}
      </table>
    </div>
  );
};

export const Spacing = () => {
  return (
    <div>
      <h1>Spacing</h1>
      <h2>Tiny</h2>
      <Box bg={DefaultTheme.colors.text} height={DefaultTheme.space.tiny} />
      <br />
      <br />
      <h2>Small</h2>
      <Box bg={DefaultTheme.colors.text} height={DefaultTheme.space.small} />
      <br />
      <br />
      <h2>Base</h2>
      <Box bg={DefaultTheme.colors.text} height={DefaultTheme.space.base} />
      <br />
      <br />
      <h2>Large</h2>
      <Box bg={DefaultTheme.colors.text} height={DefaultTheme.space.large} />
      <br />
      <br />
      <h2>X Large</h2>
      <Box bg={DefaultTheme.colors.text} height={DefaultTheme.space.xlarge} />
      <br />
      <br />
      <h2>XX Large</h2>
      <Box bg={DefaultTheme.colors.text} height={DefaultTheme.space.xxlarge} />
    </div>
  );
};