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

import { SelectWrapper } from '../../Select/StyledSelect';
import Divider from '../../Divider/StyledDivider';

import { getBreakpointValue } from '../../../utils/responsiveBreakpoints';

export type DayState =
  | 'selectedRangeDate'
  | 'selectedWeekDate'
  | 'selectedFirstDateOfWeek'
  | 'selectedLastDateOfWeek'
  | 'selectedStartDate'
  | 'selectedEndDate'
  | 'inRange'
  | 'inHoveringRange'
  | 'inHoveringWeekDate'
  | 'inHoveringFirstDateOfWeek'
  | 'inHoveringLastDateOfWeek'
  | 'enabled'
  | 'disabled'
  | 'selected'
  | 'today'
  | 'dayLabel';

export type WeekState = 'disabled' | 'enabled' | 'selected' | 'inHoveringWeek';

const Container = styled.div`
  width: fit-content;
  color: ${({ theme }) => theme.colors.datePicker.text};
  margin: 0;
  padding: 0;
`;

const NavigationWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
`;

const Navigation = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: ${({ theme }) => theme.space.datePicker.navigationPadding};

  & > ${SelectWrapper} {
    width: ${({ theme }) => theme.sizes.datePicker.monthYear};
    padding: ${({ theme }) => theme.space.datePicker.monthYearPadding};
  }
`;

const DoubleCalendarContainer = styled.div`
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;

  @media (min-width: ${getBreakpointValue('md')}px) {
    flex-direction: row;
  }

  & > ${Divider} {
    display: block;

    @media (min-width: ${getBreakpointValue('md')}px) {
      display: none;
    }
  }
`;

const CalendarContainer = styled.div`
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
`;

const CalendarWrapper = styled.div`
  margin: 0;
  padding: ${({ theme }) => theme.space.datePicker.calendarPadding};
`;

const CalendarRow = styled.div`
  display: flex;
  justify-content: space-between;
  font-size: ${({ theme }) => theme.fontSizes.datePicker.day};
  font-weight: ${({ theme }) => theme.fontWeights.datePicker.day};
  line-height: ${({ theme }) => theme.lineHeights.datePicker.day};
  margin: 0;
  padding: 0;
`;

const DayWrapper = styled.div<{
  themeState?: DayState;
}>`
  margin: ${({ theme }) => theme.space.datePicker.dayMargin};
  padding: ${({ theme }) => theme.space.datePicker.dayPadding};

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'selectedRangeDate':
        return css`
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-radius: ${theme.radii.datePicker.day};
        `;
      case 'selectedWeekDate':
        return css`
          background-color: ${theme.colors.datePicker.selectedBackground};
          &:hover {
            cursor: pointer;
          }
        `;
      case 'selectedFirstDateOfWeek':
        return css`
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-top-left-radius: ${theme.radii.datePicker.day};
          border-bottom-left-radius: ${theme.radii.datePicker.day};
          &:hover {
            cursor: pointer;
          }
        `;
      case 'selectedLastDateOfWeek':
        return css`
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-top-right-radius: ${theme.radii.datePicker.day};
          border-bottom-right-radius: ${theme.radii.datePicker.day};
          &:hover {
            cursor: pointer;
          }
        `;
      case 'selectedStartDate':
        return css`
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-top-left-radius: ${theme.radii.datePicker.day};
          border-bottom-left-radius: ${theme.radii.datePicker.day};
        `;
      case 'selectedEndDate':
        return css`
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-top-right-radius: ${theme.radii.datePicker.day};
          border-bottom-right-radius: ${theme.radii.datePicker.day};
        `;
      case 'inHoveringFirstDateOfWeek':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
          border-top-left-radius: ${theme.radii.datePicker.day};
          border-bottom-left-radius: ${theme.radii.datePicker.day};
          &:hover {
            cursor: pointer;
          }
        `;
      case 'inHoveringLastDateOfWeek':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
          border-top-right-radius: ${theme.radii.datePicker.day};
          border-bottom-right-radius: ${theme.radii.datePicker.day};
          &:hover {
            cursor: pointer;
          }
        `;
      case 'inRange':
      case 'inHoveringRange':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
        `;
      case 'inHoveringWeekDate':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
          &:hover {
            cursor: pointer;
          }
        `;
      default:
        return css``;
    }
  }};
`;

const Day = styled.span<{
  themeState: DayState;
}>`
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
  width: ${({ theme }) => theme.sizes.datePicker.day};
  height: ${({ theme }) => theme.sizes.datePicker.day};
  border-radius: ${({ theme }) => theme.radii.datePicker.day};
  box-sizing: border-box;
  cursor: pointer;

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'enabled':
        return css`
          &:hover {
            background-color: ${theme.colors.datePicker.hoverBackground};
          }
        `;
      case 'disabled':
        return css`
          color: ${theme.colors.datePicker.disabledText};
          pointer-events: none;
          cursor: not-allowed;
        `;
      case 'selected':
      case 'selectedRangeDate':
        return css`
          color: ${theme.colors.datePicker.selectedText};
          font-weight: ${theme.fontWeights.datePicker.selectedDay};
          background-color: ${theme.colors.datePicker.selectedBackground};
        `;
      case 'selectedStartDate':
        return css`
          color: ${theme.colors.datePicker.selectedText};
          font-weight: ${theme.fontWeights.datePicker.selectedDay};
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        `;
      case 'selectedEndDate':
        return css`
          color: ${theme.colors.datePicker.selectedText};
          font-weight: ${theme.fontWeights.datePicker.selectedDay};
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        `;
      case 'today':
        return css`
          color: ${theme.colors.datePicker.todayText};
          border-width: ${theme.borderWidths.datePicker.day};
          border-color: ${theme.colors.datePicker.todayBorder};
          border-style: solid;
          &:hover {
            background-color: ${theme.colors.datePicker.hoverBackground};
          }
        `;
      case 'dayLabel':
        return css`
          cursor: default;
        `;
      case 'inRange':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
          border-radius: 0;
          &:hover {
            background-color: ${theme.colors.datePicker.inRangeHoverBackground};
            color: ${theme.colors.datePicker.inRangeHoverText};
          }
        `;
      case 'selectedFirstDateOfWeek':
      case 'selectedLastDateOfWeek':
      case 'selectedWeekDate':
        return css`
          color: ${theme.colors.datePicker.selectedText};
          font-weight: ${theme.fontWeights.datePicker.selectedDay};
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-radius: 0;
        `;
      case 'inHoveringFirstDateOfWeek':
      case 'inHoveringLastDateOfWeek':
      case 'inHoveringWeekDate':
      case 'inHoveringRange':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
          border-radius: 0;
        `;
    }
  }};
`;

const WeekWrapper = styled.div`
  margin: ${({ theme }) => theme.space.datePicker.dayMargin};
  padding: ${({ theme }) => theme.space.datePicker.dayPadding};
`;

const Week = styled.span<{
  themeState: WeekState;
}>`
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0;
  padding: 0;
  width: ${({ theme }) => theme.sizes.datePicker.day};
  height: ${({ theme }) => theme.sizes.datePicker.day};
  border-radius: ${({ theme }) => theme.radii.datePicker.day};
  box-sizing: border-box;
  cursor: pointer;

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'enabled':
        return css`
          &:hover {
            background-color: ${theme.colors.datePicker.hoverBackground};
          }
        `;
      case 'disabled':
        return css`
          color: ${theme.colors.datePicker.disabledText};
          pointer-events: none;
          cursor: not-allowed;
        `;
      case 'selected':
        return css`
          color: ${theme.colors.datePicker.selectedText};
          font-weight: ${theme.fontWeights.datePicker.selectedDay};
          background-color: ${theme.colors.datePicker.selectedBackground};
        `;
      case 'inHoveringWeek':
        return css`
          background-color: ${theme.colors.datePicker.inRangeBackground};
          &:hover {
            cursor: pointer;
          }
        `;
    }
  }};
`;

const MonthNavigation = styled.div`
  margin: 0;
  padding: ${({ theme }) => theme.space.datePicker.navigationPadding};
`;

type MonthState = 'enabled' | 'disabled' | 'selected' | 'today';

const Month = styled.div<{
  themeState: MonthState;
}>`
  margin: 0;
  padding: 0;
  padding: ${({ theme }) => theme.space.datePicker.monthPadding};
  margin: ${({ theme }) => theme.space.datePicker.monthMargin};
  border-radius: ${({ theme }) => theme.radii.datePicker.month};
  box-sizing: border-box;
  cursor: pointer;

  font-size: ${({ theme }) => theme.fontSizes.datePicker.month};
  font-weight: ${({ theme }) => theme.fontWeights.datePicker.month};
  line-height: ${({ theme }) => theme.lineHeights.datePicker.month};

  ${({ themeState, theme }) => {
    switch (themeState) {
      case 'enabled':
        return css`
          &:hover {
            background-color: ${theme.colors.datePicker.hoverBackground};
          }
        `;
      case 'disabled':
        return css`
          color: ${theme.colors.datePicker.disabledText};
          pointer-events: none;
          cursor: not-allowed;
        `;
      case 'selected':
        return css`
          color: ${theme.colors.datePicker.selectedText};
          font-weight: ${theme.fontWeights.datePicker.selectedMonth};
          background-color: ${theme.colors.datePicker.selectedBackground};
          border-width: ${theme.borderWidths.datePicker.month};
          border-color: ${theme.colors.datePicker.selectedBackground};
          border-style: solid;
        `;
      case 'today':
        return css`
          color: ${theme.colors.datePicker.todayText};
          border-width: ${theme.borderWidths.datePicker.month};
          border-color: ${theme.colors.datePicker.todayBorder};
          border-style: solid;
          &:hover {
            background-color: ${theme.colors.datePicker.hoverBackground};
          }
        `;
    }
  }};
`;

const MonthGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0px;
  margin: 0px;
  width: ${({ theme }) => theme.sizes.datePicker.month};
`;

const MonthGridItem = styled.div`
  text-align: center;
  margin: 0;
  padding: 0;
  width: 33.3%;
`;

export {
  Container,
  NavigationWrapper,
  Navigation,
  DoubleCalendarContainer,
  CalendarContainer,
  CalendarWrapper,
  CalendarRow,
  DayWrapper,
  Day,
  Week,
  WeekWrapper,
  Month,
  MonthNavigation,
  MonthGrid,
  MonthGridItem,
};