import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";
import { useStyletron } from "baseui";

import Grid, { GridProps } from "./Grid";
import { Cell } from "baseui/layout-grid";
import { H3 } from "baseui/typography";
import Spacer from "../spacer/Spacer";
import { ThemeProvider } from "../ThemeProvider";

export default {
  title: "Components/Content/Grid",
  component: Grid,
} as Meta;

const Template: Story<GridProps> = (args) => {
  return (
    <ThemeProvider>
      <H3>We&apos;ve 12 available cells/columns</H3>
      <Spacer size="large" />
      <Outer>
        <Grid {...args}>
          <Cell>
            <Inner>1</Inner>
          </Cell>
          <Cell>
            <Inner>2</Inner>
          </Cell>
          <Cell>
            <Inner>3</Inner>
          </Cell>
          <Cell>
            <Inner>4</Inner>
          </Cell>
          <Cell>
            <Inner>5</Inner>
          </Cell>
          <Cell>
            <Inner>6</Inner>
          </Cell>
          <Cell>
            <Inner>7</Inner>
          </Cell>
          <Cell>
            <Inner>8</Inner>
          </Cell>
          <Cell>
            <Inner>9</Inner>
          </Cell>
          <Cell>
            <Inner>10</Inner>
          </Cell>
          <Cell>
            <Inner>11</Inner>
          </Cell>
          <Cell>
            <Inner>12</Inner>
          </Cell>
        </Grid>
      </Outer>
      <Spacer size="large" />
      <H3>You can give the cells/columns an array for repsponsiveness</H3>
      <Outer>
        <Grid>
          <Cell span={[1, 2, 3]}>
            <Inner>1</Inner>
          </Cell>
          <Cell span={[1, 2, 3]}>
            <Inner>2</Inner>
          </Cell>
          <Cell span={[1, 2, 3]}>
            <Inner>3</Inner>
          </Cell>
          <Cell span={[1, 2, 3]}>
            <Inner>4</Inner>
          </Cell>
        </Grid>
      </Outer>
    </ThemeProvider>
  );
};

const Outer: React.FC<{}> = ({ children }) => {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        background: theme.colors.accent100,
      })}
    >
      {children}
    </div>
  );
};

const Inner: React.FC<{}> = ({ children }) => {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        background: theme.colors.accent200,
        color: theme.colors.accent700,
        padding: ".25rem",
      })}
    >
      {children}
    </div>
  );
};

export const Default = Template.bind({});