import { styled } from 'styleh-components'
import { CSS } from '@skava/styleh-toolset'
import { CSS as FlexBoxCssProps } from './typings'

export interface StyledFlexProps {
  flexWrap?: CSS.FlexWrap
  direction?: CSS.FlexDirection
  justifyContent?: CSS.JustifyContent
  alignItems?: CSS.AlignItems
  grow?: CSS.FlexGrow
  shrink?: CSS.FlexShrink
  align?: CSS.AlignItems
}

export interface StyledCustomFlexProps {
  itemWidth: FlexBoxCssProps.ItemWidth
  gridGap: FlexBoxCssProps.GridGap
}

export type FlexBottomItemStyledProps = StyledCustomFlexProps & StyledFlexProps

const FlexBoxWrapper = styled.div`
  width: 100%;
`
const FlexBoxContainer = styled.div`
  width: 100%;
  position: relative;
  display: flex;

  ${(props: StyledFlexProps) =>
    props.flexWrap &&
    styled.css`
      flex-wrap: ${props.flexWrap};
    `}

  ${(props: StyledFlexProps) =>
    props.direction &&
    styled.css`
      flex-direction: ${props.direction};
    `}

  ${(props: StyledFlexProps) =>
    props.justifyContent &&
    props.direction === 'row' &&
    styled.css`
      justify-content: ${props.justifyContent};
    `}

  ${(props: StyledFlexProps) =>
    props.alignItems &&
    props.direction === 'row' &&
    styled.css`
      align-items: ${props.alignItems};
    `}

  ${(props: StyledFlexProps) =>
    props.direction &&
    props.direction === 'column' &&
    styled.css`
      height: 500px;
    `}

`
const FlexBoxItem = styled.div`
  padding: ${(props: FlexBottomItemStyledProps) => props.gridGap / 2}px;
  text-align: center;
  transition: all 600ms ease;
  overflow: hidden;
  flex-grow: ${(props: FlexBottomItemStyledProps) =>
    props.grow ? props.grow : 0};
  flex-shrink: ${(props: FlexBottomItemStyledProps) =>
    props.shrink ? props.shrink : 0};
  flex-basis: ${(props: FlexBottomItemStyledProps) =>
    props.itemWidth ? props.itemWidth : 'auto'};
  ${(props: FlexBottomItemStyledProps) =>
    props.align &&
    styled.css`
      align-self: ${props.align};
    `}
  ${(props: FlexBottomItemStyledProps) =>
    props.direction &&
    props.direction === 'column' &&
    styled.css`
      display: inline-table;
    `}
  background-color: #2b2b2b;
`

const ItemPlaceholder = styled.div`
  background: var(--color-red);
  color: white;
  font-size: 10rem;
`

export { FlexBoxWrapper, FlexBoxContainer, FlexBoxItem, ItemPlaceholder }