import React, { useEffect } from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import docs from './CssGrid.mdx';
import { CssGrid as Grid } from '../..';
var StyledContent = styled.div.withConfig({
  displayName: "CssGridstories__StyledContent",
  componentId: "sc-1pgrjiv-0"
})(["box-sizing:border-box;border:1px solid black;background-color:#eee;height:100%;"]);
var Content = function Content(_ref) {
  var children = _ref.children;
  return React.createElement(StyledContent, null, children);
};
var ComponentThatDoesSomethingOnMount = function ComponentThatDoesSomethingOnMount() {
  useEffect(action('mounted'), []);
  return React.createElement(React.Fragment, null, "This item is mounted and stays mounted no matter what. However, it\u2018d be hidden with css");
};
var ComponentThatLogsRender = function ComponentThatLogsRender(_ref2) {
  var children = _ref2.children;
  action('Rendered!')();
  return children;
};
export default {
  title: 'Atoms / CssGrid',
  parameters: {
    docs: {
      page: docs
    }
  }
};
export var SimpleCssGrid = {
  render: function render() {
    return React.createElement(Grid.Container, {
      areas: [['header', 'header', 'header'], ['menu', 'content', 'ads'], ['footer', 'footer', 'footer']],
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['1fr', '1fr', '1fr']
    }, React.createElement(Grid.Item, {
      area: "header"
    }, React.createElement(Content, null, "Header")), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, "Content")), React.createElement(Grid.Item, {
      area: "menu"
    }, React.createElement(Content, null, "Menu")), React.createElement(Grid.Item, {
      area: "ads"
    }, React.createElement(Content, null, "Ads")), React.createElement(Grid.Item, {
      area: "footer"
    }, React.createElement(Content, null, "Footer")));
  },
  name: 'Simple CssGrid'
};
export var CssGridWithCustomGutter = {
  render: function render() {
    return React.createElement(Grid.Container, {
      gutter: 0,
      areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar'], ['left', 'content', 'sidebar']],
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['1fr', '1fr', '1fr']
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, "Top")), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, "Content")), React.createElement(Grid.Item, {
      area: "sidebar"
    }, React.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with custom gutter'
};
export var CssGridWithDifferentGutterOnDifferentScreenSizes = {
  render: function render() {
    return React.createElement(Grid.Container, {
      gutter: {
        row: 5,
        col: 5
      },
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'content'], ['left', 'top', 'content']],
      md: {
        templateRows: ['auto', 'auto'],
        templateColumns: ['1fr'],
        areas: [['left', 'top', 'content'], ['left', 'top', 'content']],
        gutter: {
          row: 0,
          col: 0
        }
      }
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))), React.createElement(Grid.Item, {
      area: "non-existing"
    }, React.createElement(Content, null, "something that doesn't exist")));
  },
  name: 'Different gutter on different screen sizes'
};
export var CssGridWithObjectAsGutterAndCustomSizedColumns = {
  render: function render() {
    return React.createElement(Grid.Container, {
      gutter: {
        row: 6,
        col: 4
      },
      templateColumns: ['1fr', '2fr', '1fr'],
      templateRows: ['1fr', '1fr', '1fr'],
      areas: [['left', 'top', 'messages'], ['left', 'top', 'order'], ['left', 'top', 'sidebar'], ['left', 'top', 'sidebar'], ['left', 'content', 'sidebar']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, "Top")), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, "Content")), React.createElement(Grid.Item, {
      area: "messages"
    }, React.createElement(Content, null, "Messages")), React.createElement(Grid.Item, {
      area: "order"
    }, React.createElement(Content, null, "Order")), React.createElement(Grid.Item, {
      area: "sidebar"
    }, React.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with object as gutter and custom sized columns'
};
export var CssGridWithCustomTemplateColumns = {
  render: function render() {
    return React.createElement(Grid.Container, {
      templateColumns: [3, 6, 3],
      templateRows: ['1fr', '1fr', '1fr'],
      areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar'], ['left', 'content', 'sidebar']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, "Top")), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, "Content")), React.createElement(Grid.Item, {
      area: "sidebar"
    }, React.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with custom templateColumns'
};
export var CssGridWithDifferentLayoutsForDifferentScreenSizes = {
  render: function render() {
    return React.createElement(Grid.Container, {
      templateColumns: [6, 6],
      templateRows: ['1fr', '1fr', '1fr'],
      areas: [['top', 'top'], ['left', 'sidebar'], ['content', 'sidebar']],
      sm: {
        templateColumns: [3, 6, 3],
        templateRows: ['auto', '1fr', '1fr'],
        areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar'], ['left', 'content', 'sidebar']]
      }
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, "Top")), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, "Content")), React.createElement(Grid.Item, {
      area: "sidebar"
    }, React.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with different layouts for different screen sizes'
};
export var WithMinMax = {
  render: function render() {
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', 'minmax(30ch, 2fr)', '1fr'],
      areas: [['left', 'top', 'sidebar'], ['left', 'content', 'sidebar']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, "Top")), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, "Content")), React.createElement(Grid.Item, {
      area: "sidebar"
    }, React.createElement(Content, null, "Sidebar")));
  },
  name: 'CssGrid with minmax()'
};
export var ShownOnMdHiddenOnSmallScreens = {
  render: function render() {
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'content', 'content'], ['left', 'content', 'content']],
      md: {
        templateRows: ['auto', 'auto'],
        templateColumns: ['1fr'],
        areas: [['left'], ['top'], ['content']]
      }
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))), React.createElement(Grid.Item, {
      area: "non-existing"
    }, React.createElement(Content, null, "something that doesn't exist")));
  },
  name: 'Shown on md+, hidden on small screens'
};
export var ShownOnSmallScreenSizesHiddenOnMd = {
  render: function render() {
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'top'], ['left', 'content', 'content']],
      md: {
        templateRows: ['auto', 'auto'],
        templateColumns: ['1fr'],
        areas: [['left'], ['content']]
      }
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))), React.createElement(Grid.Item, {
      area: "non-existing"
    }, React.createElement(Content, null, "something that doesn't exist")));
  },
  name: 'Shown on small screen sizes, hidden on md+'
};
export var ConditionallyHiddenGoodWayHidden = {
  render: function render() {
    var isHidden = true;
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: isHidden ? ['auto', 'auto'] : ['auto'],
      areas: isHidden ? [['left', 'top', 'top'], ['left', 'content', 'content']] : [['left', 'content', 'content']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Conditionally hidden: good way [hidden]'
};
export var ConditionallyHiddenGoodWayShown = {
  render: function render() {
    var isHidden = false;
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: isHidden ? ['auto', 'auto'] : ['auto'],
      areas: isHidden ? [['left', 'top', 'top'], ['left', 'content', 'content']] : [['left', 'content', 'content']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Conditionally hidden: good way [shown]'
};
export var ConditionallyHiddenWrongWayHidden = {
  render: function render() {
    var isHidden = true;
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'top'], ['left', 'content', 'content']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), !isHidden && React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Conditionally hidden: WRONG way [hidden]'
};
export var ConditionallyHiddenWrongWayShown = {
  render: function render() {
    var isHidden = false;
    return React.createElement(Grid.Container, {
      templateColumns: ['1fr', '1fr', '1fr'],
      templateRows: ['auto', 'auto'],
      areas: [['left', 'top', 'top'], ['left', 'content', 'content']]
    }, React.createElement(Grid.Item, {
      area: "left"
    }, React.createElement(Content, null, "Left")), !isHidden && React.createElement(Grid.Item, {
      area: "top"
    }, React.createElement(Content, null, React.createElement(ComponentThatDoesSomethingOnMount, null))), React.createElement(Grid.Item, {
      area: "content"
    }, React.createElement(Content, null, React.createElement(ComponentThatLogsRender, null, "Content"))));
  },
  name: 'Items with different placements'
};
var BgContent = styled.div.withConfig({
  displayName: "CssGridstories__BgContent",
  componentId: "sc-1pgrjiv-1"
})(["background-color:", ";"], function (p) {
  return p.theme.color.background;
});
export var ItemsWithDifferentPlacements = function ItemsWithDifferentPlacements() {
  return React.createElement(Grid.Container, {
    templateColumns: ['100px', '100px', '100px', '100px'],
    templateRows: ['100px', '100px', '100px'],
    areas: [['alignStart', 'alignCenter', 'alignStretch', 'alignEnd'], ['justifyStart', 'justifyCenter', 'justifyStretch', 'justifyEnd'], ['placeStart', 'placeCenter', 'placeStretch', 'placeEnd']]
  }, React.createElement(Grid.Item, {
    area: "alignStart",
    align: "start"
  }, React.createElement(BgContent, null, "left")), React.createElement(Grid.Item, {
    area: "alignCenter",
    align: "center"
  }, React.createElement(BgContent, null, "center")), React.createElement(Grid.Item, {
    area: "alignStretch",
    align: "stretch"
  }, React.createElement(BgContent, null, "stretch")), React.createElement(Grid.Item, {
    area: "alignEnd",
    align: "end"
  }, React.createElement(BgContent, null, "end")), React.createElement(Grid.Item, {
    area: "justifyStart",
    justify: "start"
  }, React.createElement(BgContent, null, "left")), React.createElement(Grid.Item, {
    area: "justifyCenter",
    justify: "center"
  }, React.createElement(BgContent, null, "center")), React.createElement(Grid.Item, {
    area: "justifyStretch",
    justify: "stretch"
  }, React.createElement(BgContent, null, "stretch")), React.createElement(Grid.Item, {
    area: "justifyEnd",
    justify: "end"
  }, React.createElement(BgContent, null, "end")), React.createElement(Grid.Item, {
    area: "placeStart",
    place: "start"
  }, React.createElement(BgContent, null, "left")), React.createElement(Grid.Item, {
    area: "placeCenter",
    place: "center"
  }, React.createElement(BgContent, null, "center")), React.createElement(Grid.Item, {
    area: "placeStretch",
    place: "stretch"
  }, React.createElement(BgContent, null, "stretch")), React.createElement(Grid.Item, {
    area: "placeEnd",
    place: "end"
  }, React.createElement(BgContent, null, "end")));
};