// @flow
import React from 'react';
import styled from 'styled-components';
import { times } from 'lodash';
import { getPaletteColor } from '../../../mixins/branding';
import { Box } from '../../../primitives';
import { Grid } from './grid.component';
import { GridItem } from './grid-item';
import { Card } from '../card';
import docs from './grid.examples.mdx';

export default {
  component: Grid,
  title: 'Examples/Layout/Grid',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const TwoColumnLayout = () => (
  <Grid>
    <GridItem sm={12} md={7} lg={8} xl={9}>
      <Card spacing={['p2', 'mb2']}>
        <code>
          <pre>{'<GridItem sm={12} md={7} lg={8} xl={9}>'}</pre>
        </code>
      </Card>
    </GridItem>
    <GridItem sm={12} md={5} lg={4} xl={3}>
      <Card spacing="p2">
        <code>{'<GridItem sm={12} md={5} lg={4} xl={3}>'}</code>
      </Card>
    </GridItem>
  </Grid>
);

export const OneColumnLayout = () => (
  <>
    <Grid>
      <GridItem
        sm={12}
        md={6}
        lg={4}
        xl={6}
        offsetMd={3}
        offsetLg={4}
        offsetXl={3}
      >
        <Card spacing={['p2', 'mb2']}>
          <code>
            {
              '<GridItem sm={12} md={6} lg={4} xl={6} offsetMd={3} offsetLg={4} offsetXl={3}>'
            }
          </code>
        </Card>
      </GridItem>
    </Grid>
    <Grid>
      <GridItem
        sm={12}
        md={8}
        lg={6}
        xl={4}
        offsetMd={2}
        offsetLg={3}
        offsetXl={4}
      >
        <Card spacing="p2">
          <code>
            {
              '<GridItem sm={12} md={8} lg={6} xl={4} offsetMd={2} offsetLg={3} offsetXl={4}>'
            }
          </code>
        </Card>
      </GridItem>
    </Grid>
  </>
);

export const FullGrid = () => (
  <Grid>
    {times(12, (i) => (
      <GridItem key={`key-${i}`} sm={1}>
        <Card spacing={['ph1', 'pv3', 'mv3']} />
      </GridItem>
    ))}
  </Grid>
);

const ChildBox = styled(Box)`
  background: ${getPaletteColor('brand-secondary-fg')};
  border: solid ${getPaletteColor('brand-secondary-bg')} 1px;
  color: ${getPaletteColor('brand-secondary-bg')};
  height: 25px;
  width: 25px;
`;

export const MixinsStacking = () => (
  <Grid>
    <GridItem sm={6} stacked="row">
      <ChildBox grow={1}>1</ChildBox>
      <ChildBox grow={1}>2</ChildBox>
      <ChildBox grow={1}>3</ChildBox>
    </GridItem>
    <GridItem sm={6} stacked="column">
      <ChildBox>1</ChildBox>
      <ChildBox>2</ChildBox>
      <ChildBox>3</ChildBox>
    </GridItem>
  </Grid>
);
