import React, { FC } from 'react';
import { styled } from '../../styles';
import { ulReset } from '../../styles/utils';
import { Grid } from '../Grid';
import { Item } from './Item';

type GridProps = React.ComponentProps<typeof Grid>;

const defaultProps = {
  ...Grid.defaultProps,
  alignItems: 'center',
  horizontal: false,
  zebra: false,
};

type Props = GridProps & typeof defaultProps;

const ListComponent: FC<Props> = ({ horizontal, zebra, ...otherProps }) => {
  const gridProps = {
    gridAutoRows: !horizontal && 'minmax(min-content, max-content)',
    gridAutoColumns: horizontal && 'minmax(min-content, max-content)',
    gridAutoFlow: horizontal ? 'column' : 'row',
  };

  return <Grid as="ul" {...gridProps} {...otherProps} />;
};

const StyledList = styled(ListComponent)<Props>(
  ulReset,
  ({ theme, zebra }) => ({
    [`${Item}:nth-of-type(odd)`]: {
      backgroundColor: zebra && theme.colors.gray[1],
    },
  })
);

export const List = Object.assign(StyledList, {
  Item,
});

List.defaultProps = defaultProps;
