// @flow
import React from 'react';
import { times } from 'lodash';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import styled from 'styled-components';
import { Grid } from '.';
import { GridItem } from './grid-item';
import { Box } from '../../../primitives';
import { Card } from '..';
import { Head1, Text } from '../../typography';
import { ClickableList } from '../../forms/clickable-list';
import { withDocs } from '../../../../.storybook/with-docs';
import { bpMedium, bpLarge, bpXLarge } from '../../../breakpoints';
import docs from './GRID.mkd';
import { getPaletteColor } from '../../../mixins/branding';

// Illustrates the breakpoints changing
const BreakpointBox = styled(Box)`
  min-height: 10px;
  background: ${getPaletteColor('brand-primary-base')};

  && {
    @media (min-width: ${bpMedium}) {
      background: ${getPaletteColor('brand-secondary-base')};
    }

    @media (min-width: ${bpLarge}) {
      background: ${getPaletteColor('brand-secondary-fg')};
    }

    @media (min-width: ${bpXLarge}) {
      background: ${getPaletteColor('background')};
    }
  }
`;

storiesOf('Core/Structures/Grid', module)
  .add(
    '2-column layout',
    withDocs(docs, [BreakpointBox, Card, Box, Head1, Text])(() => (
      <>
        <BreakpointBox />
        <Box colorName="background" spacing="pv4">
          <Grid>
            <GridItem sm={12} md={7} lg={8} xl={9}>
              <Box spacing="mv1">
                <Card style={{ height: 200 }}>
                  <Box spacing="p2">
                    <code>{'<GridItem sm={12} md={7} lg={8} xl={9}'}</code>
                  </Box>
                </Card>
              </Box>
            </GridItem>
            <GridItem sm={12} md={5} lg={4} xl={3}>
              <Box spacing="mv1">
                <Card style={{ height: 200 }}>
                  <Box spacing="p2">
                    <code>{'<GridItem sm={12} md={5} lg={4} xl={3}>'}</code>
                  </Box>
                </Card>
              </Box>
            </GridItem>
          </Grid>
        </Box>
      </>
    )),
  )
  .add(
    '1-column layout',
    withDocs(docs, [BreakpointBox, Card, Box, Head1, Text])(() => (
      <>
        <BreakpointBox />
        <Box colorName="background" spacing={['pt2', 'pb7']}>
          <Grid>
            <GridItem
              sm={12}
              md={6}
              lg={4}
              xl={3}
              offsetMd={3}
              offsetLg={4}
              offsetXl={5}
            >
              <Box spacing="pt5">
                <Head1>Please choose an account to log in to</Head1>
              </Box>

              <Box spacing="pt5">
                <ClickableList
                  label="Choose one"
                  options={[
                    { id: 'id-Advisor', text: 'My advisor account' },
                    { id: 'id-Personal', text: 'My personal account' },
                  ]}
                  onClick={action('Clicked something')}
                />
              </Box>
              <Box spacing="mt5">
                <code>
                  {
                    '<GridItem sm={12} md={6} lg={4} xl={3} offsetMd={3} offsetLg={4} offsetXl={5}>'
                  }
                </code>
              </Box>
            </GridItem>
          </Grid>
        </Box>
      </>
    )),
  )
  .add(
    '1-column layout (alternate)',
    withDocs(docs, [BreakpointBox, Card, Box, Head1, Text])(() => (
      <>
        <BreakpointBox />
        <Box colorName="background" spacing="pv4">
          <Grid>
            <GridItem
              sm={12}
              md={6}
              lg={4}
              xl={6}
              offsetMd={3}
              offsetLg={4}
              offsetXl={3}
            >
              <Box spacing="mb1">
                <Head1 style={{ textAlign: 'center' }}>Page title</Head1>
              </Box>
              <Text style={{ textAlign: 'center' }}>
                Can you ballpark the cost per unit for me. We are running out of
                runway.
              </Text>
              <Text style={{ textAlign: 'center' }}>
                Touch base, and we can synchronise ourselves, get all your ducks
                in a row, lean into that problem we need to leverage our
                synergies.
              </Text>
              <Text style={{ textAlign: 'center' }}>
                <code>
                  {
                    '<GridItem sm={12} md={6} lg={4} xl={6} offsetMd={3} offsetLg={4} offsetXl={3}>'
                  }
                </code>
              </Text>
            </GridItem>
          </Grid>
          <Grid>
            <GridItem
              sm={12}
              md={8}
              lg={6}
              xl={4}
              offsetMd={2}
              offsetLg={3}
              offsetXl={4}
            >
              <Box spacing="mt1">
                <Card style={{ height: 400 }}>
                  <Box spacing="p2">
                    <code>
                      {
                        '<GridItem sm={12} md={8} lg={6} xl={4} offsetMd={2} offsetLg={3} offsetXl={4}>'
                      }
                    </code>
                  </Box>
                </Card>
              </Box>
            </GridItem>
          </Grid>
        </Box>
      </>
    )),
  )
  .add(
    'Full grid',
    withDocs(docs, [BreakpointBox, Card])(() => (
      <BreakpointBox spacing="pv2">
        <Grid>
          {times(12, i => (
            <GridItem key={`key-${i}`} sm={1}>
              <Card spacing={['ph1', 'pv3', 'mv3']} />
            </GridItem>
          ))}
        </Grid>
      </BreakpointBox>
    )),
  );
