// @flow
import React from 'react';
import styled from 'styled-components';
import { Box, getPaletteColor, Span, Text, useBreakPoint } from '../../index';
import docs from './stackee.mdx';

export default {
  title: 'Design System/Layout/Stackee',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const RowGrowContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
`;

export const RowGrow = () => (
  <RowGrowContainer stacked="row">
    <Box colorName="brand-secondary-bg" grow={1} spacing="p1">
      <Span colorName="brand-secondary-fg">grow 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" grow={2} spacing="p1">
      <Span colorName="brand-secondary-bg">grow 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" grow={3} spacing="p1">
      <Span colorName="brand-secondary-fg">grow 3</Span>
    </Box>
  </RowGrowContainer>
);

const ColumnGrowContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
  width: 200px;
  height: 300px;
`;

export const ColumnGrow = () => (
  <ColumnGrowContainer stacked="column">
    <Box colorName="brand-secondary-bg" grow={1} spacing="p1">
      <Span colorName="brand-secondary-fg">grow 1</Span>
    </Box>
    <Box colorName="brand-secondary-fg" grow={2} spacing="p1">
      <Span colorName="brand-secondary-bg">grow 2</Span>
    </Box>
    <Box colorName="brand-secondary-bg" grow={3} spacing="p1">
      <Span colorName="brand-secondary-fg">grow 3</Span>
    </Box>
  </ColumnGrowContainer>
);

const RowBasisContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
`;

export const RowBasis = () => (
  <RowBasisContainer stacked="row">
    <Box colorName="brand-secondary-bg" basis={200} spacing="p1">
      <Span colorName="brand-secondary-fg">basis 200</Span>
    </Box>
    <Box colorName="brand-secondary-fg" basis={100} spacing="p1">
      <Span colorName="brand-secondary-bg">basis 100</Span>
    </Box>
  </RowBasisContainer>
);

const ColumnBasisContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
  width: 200px;
  height: 400px;
`;

export const ColumnBasis = () => (
  <ColumnBasisContainer stacked="column">
    <Box colorName="brand-secondary-bg" basis={200} spacing="p1">
      <Span colorName="brand-secondary-fg">basis 200</Span>
    </Box>
    <Box colorName="brand-secondary-fg" basis={100} spacing="p1">
      <Span colorName="brand-secondary-bg">basis 100</Span>
    </Box>
  </ColumnBasisContainer>
);

const RowShrinkContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
  max-width: 300px;
`;

export const RowShrink = () => (
  <RowShrinkContainer stacked="row">
    <Box colorName="brand-secondary-bg" shrink={2} basis={300} spacing="p1">
      <Span colorName="brand-secondary-fg">shrink 2</Span>
    </Box>
    <Box colorName="brand-secondary-fg" shrink={1} basis={300} spacing="p1">
      <Span colorName="brand-secondary-bg">shrink 1</Span>
    </Box>
  </RowShrinkContainer>
);

const ColumnShrinkContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
  width: 200px;
  height: 300px;
`;

export const ColumnShrink = () => (
  <ColumnShrinkContainer stacked="column">
    <Box colorName="brand-secondary-bg" shrink={2} basis={300} spacing="p1">
      <Span colorName="brand-secondary-fg">shrink 2</Span>
    </Box>
    <Box colorName="brand-secondary-fg" shrink={1} basis={300} spacing="p1">
      <Span colorName="brand-secondary-bg">shrink 1</Span>
    </Box>
  </ColumnShrinkContainer>
);

export const Responsive = () => {
  const bp = useBreakPoint();

  return (
    <>
      <Text spacing="mv2">Current breakpoint: &quot;{bp}&quot;</Text>

      <Box stacked={{ sm: 'column', md: 'row' }}>
        <Box
          colorName="brand-secondary-bg"
          basis={{ md: 100, lg: 200, xl: 500 }}
          grow={{ sm: 1, md: 0 }}
          spacing="p1"
        >
          <Span colorName="brand-secondary-fg">Inner 1</Span>
        </Box>
        <Box
          colorName="brand-secondary-fg"
          basis={{ md: 100, lg: 200, xl: 500 }}
          grow={{ sm: 1, md: 0 }}
          spacing="p1"
        >
          <Span colorName="brand-secondary-bg">Inner 2</Span>
        </Box>
      </Box>
    </>
  );
};
