import styled from 'styled-components';

import { RangeDatePicker } from 'react-datepicker-configurable';
import { theme, BaseContainer } from '@veeqo/ui';

import { FontStyles } from 'types';

const Picker = styled(RangeDatePicker)``;

const baseFontSize = '12px';
const titleFontSize = '1.3em';

const primaryColorDark = '#e64a19';
const primaryColor = theme.colors.secondary.blue.base;
const primaryColorLight = theme.colors.secondary.blue.lightest;
const primaryColorText = '#ffffff';
const primaryTextColor = '#212121';
const greyBase = theme.colors.neutral.grey.base;
const inkDark = theme.colors.neutral.ink.dark;
const inkLightest = theme.colors.neutral.ink.lightest;
const dividerColor = '#e4e4e4';
const dayRangeColor = '#dce1ff';

const styles: FontStyles = theme?.text?.placeholder ?? {
  fontFamily: theme.fontFamily,
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontSize: '14px',
  lineHeight: '24px',
  color: inkLightest,
  textDecoration: 'none',
};
// const secondaryBlueBase: string = theme?.colors?.secondary?.blue?.base ?? '#0079D1';
// const errorColor: string = theme?.colors?.secondary?.red?.base ?? '#EB5757';
// const placeholderColor: string = styles.color;

const Container = styled(BaseContainer)`
  & {
    .rc-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 80;
    }

    .range-picker-input {
      display: inline-flex;
      /* border: 1px solid ${dividerColor}; */
      width: 300px;
      * {
        box-sizing: border-box;
      }
      &__icon {
        display: inline-flex;
        align-items: center;
      }
      &__start,
      &__end {
        display: inline-flex;
        flex: 1;

        font-family: ${styles.fontFamily};
        font-style: ${styles.fontStyle};
        font-weight: ${styles.fontWeight};
        font-size: ${styles.fontSize};
        color: ${inkDark};
        border: 1px solid ${inkLightest};
        border-radius: 4px;
        font-size: 12px;
        line-height: 16px;
        padding: 6px 8px 8px 8px;
        outline: none;

        .picker-input.range {
          input {
            width: 100%;
            border: none;
          }
        }
      }

      &__start {
        margin-right: 24px;
      }

      &__end {
        margin-left: 24px;
      }
    }

    .picker-input {
      display: inline-block;
      position: relative;
      &__icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        @include inline-center;
      }
      &__text {
        border: 1px solid ${dividerColor};
        outline: none;
        font-size: ${baseFontSize} * 1.4;
        &:disabled {
          background: ${dividerColor};
        }
      }
      &__clear {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        cursor: pointer;
      }
    }

    .picker {
      display: inline-block;
      &__container {
        position: absolute;
        z-index: 100;
        &.portal {
          position: fixed;
        }
        &__include-time {
          border: 1px solid ${dividerColor};
          .calendar__item,
          .time__container {
            border: none;
          }
        }
        &__tab {
          & button {
            padding: 5px 10px;
            outline: none;
            display: inline-flex;
            align-items: center;
            background: none;
            border: none;
            border-bottom: 2px solid ${dividerColor};
            &.active {
              color: ${primaryColorDark};
              border-bottom: 2px solid ${primaryColorDark};
            }
            &:first-child {
              border-right: none;
            }
            svg {
              margin-right: 5px;
            }
          }
          margin: 10px 0;
        }
      }
    }

    .time__container {
      display: inline-flex;
      align-items: center;
      border: 1px solid ${dividerColor};
      padding: 15px;
      background: white;
      font-family: ${theme.fontFamily};
      font-size: ${baseFontSize};
      &__div {
        margin: 0 10px;
      }
      &__type {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
      }
    }

    .time-input {
      display: inline-block;
      width: 40px;
      overflow: hidden;
      &__up,
      &__down {
        border: 1px solid ${dividerColor};
        button {
          outline: none;
          width: 100%;
          cursor: pointer;
          border: none;
        }
      }

      &__text {
        width: 100%;
        border-left: 1px solid ${dividerColor};
        border-right: 1px solid ${dividerColor};
        box-sizing: border-box;
        input {
          width: 100%;
          box-sizing: border-box;
          border: none;
          font-size: 15px;
          padding: 5px;
          text-align: center;
          outline: none;
        }
      }
    }

    .calendar {
      display: inline-block;
      background: white;
      font-size: ${baseFontSize};
      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }

      &__container {
        width: 270px;
        font-family: ${theme.fontFamily};
        display: none;
      }

      &__list {
        display: table;
        // New styles
        border: none;
        border-radius: 4px;
        box-shadow: ${theme.shadows.base};
        padding: 24px 16px 36px 16px;
        // new styles [end]
      }

      &__item {
        display: table-cell;

        &:not(:first-child) {
          border-left: none !important;
        }
      }

      &--show {
        display: inline-block;
        margin-right: 32px;
      }

      &__head {
        position: relative;
        // background: ${primaryColor};
        padding: 10px 6px;
        &--title {
          font-size: ${titleFontSize};
          color: ${primaryTextColor};
          text-align: center;
          margin: 4px;
        }
        &--button {
          outline: none;
          border: none;
          cursor: pointer;
          background: none;
          font-size: 20px;
          svg {
            fill: ${primaryTextColor};
          }
        }
        &--prev,
        &--next {
          position: absolute;
          top: 0;
          bottom: 0;
          display: flex;
          align-items: center;
        }
        &--prev {
          left: 0;
        }
        &--next {
          right: 0;
        }
      }

      &__panel {
        &--show {
          display: block !important;
        }

        &--today {
          background: ${primaryColorLight}-light;
          padding: 5px;
          display: none;
          h2 {
            margin: 0;
            cursor: pointer;
            font-size: ${baseFontSize};
            text-align: center;
          }
        }
      }

      &__body {
        &--table {
          width: 100%;
          table-layout: fixed;
          text-align: center;
          border-spacing: none;
          border-collapse: collapse;
          th {
            height: 50px;
            vertical-align: middle;
            color: #959fa8;
          }
        }
      }

      &__day {
        vertical-align: top;
        padding-top: 5px;
        height: 40px;
        // new styles
        border: 1px solid #cdd1d5;
        // new styles [end]
        &:hover {
          background: ${primaryColorLight};
          cursor: pointer;
        }
        cursor: pointer;
        &--0 {
          color: red;
        }
        &--6 {
          color: blue;
        }
        &--today {
          background: ${greyBase};
        }
        &--disabled {
          color: #ddd;
          cursor: initial;
        }
        &--start,
        &--end,
        &--selected {
          background: ${primaryColor};
          color: ${primaryColorText};
          &:hover {
            background: ${primaryColor};
          }
        }
        &--range {
          background: ${dayRangeColor};
        }
        &--text {
          display: block;
          font-size: 10px;
        }
      }

      &__year,
      &__month {
        height: 55px;
        vertical-align: middle;
        &:hover {
          background: ${primaryColorLight};
          cursor: pointer;
        }
      }
    }
  }
`;

export {
  Picker,
  Container,
};