// THEMING IS HARD WITH THIS ONE.
// Сначала - темы.
import produce from 'immer'
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
// https://github.com/airbnb/react-dates/blob/master/src/theme/DefaultTheme.js

ThemedStyleSheet.registerInterface(aphroditeInterface);
const DesignSystemTheme = produce(DefaultTheme, draft => {
  const { input, pickerInput } = draft.reactDates.border
  input.border = '1px solid transparent';
  input.borderTop = '1px solid transparent'
  input.borderBottom ='1px solid transparent'
  input.borderLeft = '1px solid transparent'
  input.borderRight= '1px solid transparent';
  input.borderTopFocused = '1px solid #0091ea';
  input.borderLeftFocused= '1px solid #0091ea';
  input.borderBottomFocused= '1px solid #0091ea';
  input.borderRightFocused= '1px solid #0091ea';
  input.borderRadius = 4;
  pickerInput.borderRadius = 4
  // Цвета:
  const { color } = draft.reactDates
  const lightBlue = '#0091ea'
  const blue = '#1e88e5'
  const darkBlue = '#1976d2'
  color.core.primary = darkBlue;
  color.core.primaryShade_1 = blue;
  color.core.primaryShade_2 = lightBlue;
  color.core.primaryShade_3 = lightBlue;
  color.core.primaryShade_4 = lightBlue;
  color.background = '#f5f5f5';
  color.backgroundFocused = '#ffffff';
  color.border = 'transparent';
  color.outside.backgroundColor_hover = '#ff0000';
  //tbd
  const { sizing } = draft.reactDates
  sizing.inputWidth = '100%';
  sizing.inputWidth = '100%';
  const { spacing }= draft.reactDates
  spacing.displayTextPaddingTop = 7;
  spacing.displayTextPaddingBottom = 7;
  spacing.displayTextPaddingLeft = 16;
  spacing.displayTextPaddingRight = 8;
  const { font } = draft.reactDates
  font.input.size = 14;
  font.input.size_small = 14;
})
ThemedStyleSheet.registerTheme(DesignSystemTheme);

// Проставим локаль.
import 'moment/locale/ru'
moment.locale('ru')
// Ta-da!

// Теперь у нас отст<s>тойный</s>айленный датапикер.
import React, { Component } from 'react'
import moment from 'moment'
import styled from 'styled-components'
import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates'
import Box from '../primitives/Box'

const Wrapper = styled(Box)`
  input:hover:not(:focus) {
    border: 1px solid #3a3a3a !important;
    background: #ffffff !important;
  }
`

/** Используется для получение данных типа "Дата" от пользователя.*/
class Datepicker extends Component {
  constructor(props) {
    super(props)
    if (!this.props.id) {
      throw new Error('id prop обязателен для компонента.')
    }
    this.state = {
      value: props.value === undefined ? props.value : props.defaultValue || null,
    }
  }

  static getDerivedStateFromProps(nextProps) {
    if ('value' in nextProps) {
      return {
        value: nextProps.value,
      }
    }
    return null
  }

  handleChange = (newDate, b, c) => {
    this.setState({
      value: newDate,
    })
    this.props.onChange && this.props.onChange(newDate)
  }

  render() {
    return (
      <Wrapper>
        <SingleDatePicker
          className="dsDatepicker"
          {...this.props}
          // required props
          date={this.state.value} // momentPropTypes.momentObj or null
          onDateChange={this.handleChange} // PropTypes.func.isRequired
          focused={this.state.focused} // PropTypes.bool
          onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
          // optional
          hideKeyboardShortcutsPanel
          regular
          numberOfMonths={1}
          isOutsideRange={() => false}
        />
      </Wrapper>
    )
  }
}

/** @component */
export default Datepicker