import styled from 'styled-components';

import DatePicker from 'react-datepicker';

import {
  Text, BaseContainer, Button, AnimatedDropdown, TextField, theme,
} from '@veeqo/ui';
import { FontStyles } from 'types';
import { StyledComponentsProps } from './types';

const baseFontSize = '12px';
const titleFontSize = '20px';

const primaryColor = theme.colors.secondary.blue.base;
const primaryColorLight = theme.colors.secondary.blue.lightest;
const greyDark = theme.colors.neutral.grey.dark;
const inkLightest = theme.colors.neutral.ink.lightest;
const dividerColor = '#e4e4e4';

const styles: FontStyles = theme?.text?.placeholder ?? {
  fontFamily: theme.fontFamily,
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontSize: '14px',
  lineHeight: '24px',
  textDecoration: 'none',
};

const Label = styled(Text)`
  margin-bottom: 8px;
`;

const DatePickerContainer = styled(BaseContainer)<StyledComponentsProps>`
  display: flex;
  flex-direction: ${(props) => (props.vertical ? 'column' : 'row')};
`;

const CalendarContainer = styled(BaseContainer)<StyledComponentsProps>`
  padding: 24px 16px;
  display: flex;
  justify-content: center;
  ${(props) => (props.vertical ? `border-bottom: 1px solid ${dividerColor}` : `border-right: 1px solid ${dividerColor}`)};

  .react-datepicker {
    display: flex;
    flex-direction: row;
    font-family: ${styles.fontFamily};
    font-style: ${styles.fontStyle};
    font-weight: ${styles.fontWeight};
    font-size: ${styles.fontSize};
    line-height: ${styles.lineHeight};
    text-decoration: ${styles.lineHeight};

    /* second calendar */
    & > :last-child {
      margin-right: 0px;
    }
  }

  .react-datepicker__navigation {
    background: none;
    cursor: pointer;
    position: absolute;
    top: 32px;
    padding: 0;
    border: 2px solid transparent;
    z-index: 1;
    height: 10px;
    width: 10px;
    overflow: hidden;
    font-size: 0;
    transform: rotate(-45deg);

    &:focus {
      outline: none;
    }
  }

  .react-datepicker__navigation--previous {
    left: 25px;
    border-color: ${primaryColor} transparent transparent ${primaryColor};
  }

  .react-datepicker__navigation--next {
    right: 25px;
    border-color: transparent ${primaryColor} ${primaryColor} transparent;
  }

  .react-datepicker__month-container {
    margin-right: 32px;
  }

  .react-datepicker__header {
    text-align: center;
    position: relative;
    margin-bottom: 8px;
  }

  .react-datepicker__current-month {
    font-weight: 600;
    font-size: ${titleFontSize};
    cursor: default;
    margin-bottom: 32px;
  }

  .react-datepicker__day-names {
    display: flex;
    flex-direction: row;
    color: ${inkLightest};
    font-size: ${baseFontSize};
  }

  .react-datepicker__day,
  .react-datepicker__day-name {
    display: inline-block;
    cursor: default;
    width: 41px; /* cell width (40px) + border-rigth (1px) */
    text-align: center;
  }

  .react-datepicker__month {
    display: flex;
    flex-direction: column;
    border: 1px solid ${greyDark};
    border-radius: 4px;
  }

  .react-datepicker__week {
    display: flex;
    flex-direction: row;
    max-height: 40px;
    border-bottom: 1px solid ${greyDark};

    &:last-child {
      border-bottom: none;
    }
  }

  .react-datepicker__day {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    border-right: 1px solid ${greyDark};
    background-color: white;

    &:last-child {
      border-right: none;
    }

    &:hover {
      background: ${primaryColorLight};
      cursor: pointer;
    }

    &:focus {
      border: none;
      outline: none;
      overflow: hidden;
      z-index: 10;
      box-shadow: 0 0 0 4px #80BCE8;
      border-radius: 4px;
      margin-right: 1px; /* simulate with with hidden rigth border */

      :last-child {
        margin-right: 0px;
      }
    }
  }

  .react-datepicker__day--disabled {
    color: #959FA8;

    &:hover {
      cursor: default;
      background: white;
    }
  }

  .react-datepicker__day--in-range,
  .react-datepicker__day--in-selecting-range {
    &:not(.react-datepicker__day--outside-month) {
      background-color: ${primaryColorLight};
    }
  }

  .react-datepicker__day--selected,
  .react-datepicker__day--range-end {
    &:not(.react-datepicker__day--outside-month) {
      color: white;
      background: ${primaryColor};

      &:hover {
        background: ${primaryColor};
      }
    }
  }

  .react-datepicker__day--outside-month {
    pointer-events: none;
    color: white;

    &:hover {
      background: white;
      cursor: default;
    }
  }
`;

const Calendar = styled(DatePicker)``;

const ControlsContainer = styled(BaseContainer)<StyledComponentsProps>`
  margin: ${(props) => (props.vertical ? '16px' : '24px')};
`;

const DateRangeLabel = styled(Label)``;

const Select = styled(AnimatedDropdown)<StyledComponentsProps>`
  > div {
    width: 100%;
  }

  .date-range-select-basic-dropdown,
  .compare-period-select-basic-dropdown {
    position: ${(props) => (props.vertical ? 'relative' : 'absolute')};
  }
`;

const SelectButton = styled(Button)`
  width: 100%;
  justify-content: space-between;
  box-shadow: none;
  border-color: ${inkLightest};
  height: 40px;
  padding: 0 12px;

  &:hover {
    background-color: white;
  }

  &:focus {
    border-color: #0079D1;
    box-shadow: 0 0 0 4px #80BCE8;
  }
`;

interface SubmitButtonProps {
  width?: string;
  marginBottom?: string;
  marginLeft?: string;
  marginRight?: string;
}

export const SubmitButton = styled(Button)<SubmitButtonProps>`
  text-transform: none;
  font-weight: 600;
  flex-direction: column;
  width: ${(props: SubmitButtonProps) => props.width || 'auto'};
  margin-bottom: ${(props: SubmitButtonProps) => props.marginBottom || 'auto'};
  margin-left: ${(props: SubmitButtonProps) => props.marginLeft || 'auto'};
  margin-right: ${(props: SubmitButtonProps) => props.marginRight || 'auto'};
`;

const SelectItemsContainer = styled(BaseContainer)`
  display: flex;
  flex-direction: column;
  margin: 12px 0;
  z-index: 99;
`;

const SelectItem = styled(Text)`
  padding: 0 16px 8px 16px;

  &:first-child {
    padding-top: 8px;
  }

  &:hover {
    cursor: pointer;
    color: ${primaryColor};
  }
`;

const DateRangeInputsContainer = styled(BaseContainer)`
  display: flex;
  flex-direction: row;
  margin-top: 16px;
`;

const ButtonContainer = styled(BaseContainer)<StyledComponentsProps>`
  display: flex;
  margin-top: 16px;
  flex-direction: ${(props) => (props.vertical ? 'column' : 'row')};
`;

const DateRangeInputContainer = styled(BaseContainer)`
  flex-direction: column;
`;

const DateRangeInputsDivider = styled(Text)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 28px;
  padding: 0 8px;
`;

const DateRangeInput = styled(TextField)`
  width: 100%;
`;

const ComparePeriodContainer = styled(BaseContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 8px;
`;

const ComparePeriodLabel = styled(Text)`
  margin-left: 12px;
  margin-bottom: 6px;
`;

export {
  Label,
  DatePickerContainer,
  CalendarContainer,
  Calendar,
  DateRangeLabel,
  Select,
  SelectButton,
  SelectItemsContainer,
  SelectItem,
  ControlsContainer,
  DateRangeInputsContainer,
  DateRangeInputContainer,
  DateRangeInputsDivider,
  DateRangeInput,
  ComparePeriodContainer,
  ComparePeriodLabel,
  ButtonContainer,
};