import styled, { css } from 'styled-components';

import { DropdownWrapper } from '../Dropdown/StyledDropdown';

const animationDuration = '0.25s';

const PanelColumnWrapper = styled.ul`
  flex: 1 0 auto;
  width: ${({ theme }) => theme.sizes.timePicker.columnWidth};
  margin: 0;
  padding: 0;
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  border-left-style: solid;
  border-left-width: ${({ theme }) => theme.borderWidths.timePicker.column};
  border-left-color: ${({ theme }) => theme.colors.timePicker.columnBorder};

  &:focus {
    outline: none;
  }
  &:after {
    display: block;
    height: ${({ theme }) => theme.sizes.timePicker.columnAfterHeight};
    content: '';
  }
  &:first-child {
    border: none;
  }
`;

const PanelCellWrapper = styled.li`
  margin: 0;
  padding: 0;
  transition: background ${animationDuration};
  background: ${({ theme }) => theme.colors.timePicker.cellBackground};

  &:hover {
    background: ${({ theme }) => theme.colors.timePicker.cellHover};
  }
`;

const PanelCellInner = styled.div<{ themeActive: boolean }>`
  display: block;
  width: 100%;
  height: ${({ theme }) => theme.sizes.timePicker.cellHeight};
  margin: 0;
  padding: ${({ theme }) => theme.space.timePicker.cellPadding};
  color: ${({ theme }) => theme.colors.timePicker.cell};
  line-height: ${({ theme }) => theme.lineHeights.timePicker.cell};
  font-size: ${({ theme }) => theme.fontSizes.timePicker.cell};
  cursor: pointer;

  ${({ themeActive, theme }) => {
    switch (themeActive) {
      case true:
        return css`
          background-color: ${theme.colors.timePicker.cellActive};
          font-weight: ${theme.fontWeights.timePicker.cellActive};
        `;
      case false:
        return css``;
    }
  }};
`;

const PanelContainer = styled.div`
  display: flex;
  flex: auto;
  height: ${({ theme }) => theme.sizes.timePicker.columnHeight};
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
  padding: 0;

  &:focus {
    outline: none;
  }
`;

const TimePickerWrapper = styled.div`
  margin: 0;
  padding: 0;

  & > ${DropdownWrapper} {
    display: block;
  }
`;

export {
  PanelColumnWrapper,
  PanelCellWrapper,
  PanelCellInner,
  PanelContainer,
  TimePickerWrapper,
};