/* eslint-disable prefer-arrow/prefer-arrow-functions */
/**
 * @format
 */

import React, {useState, useRef} from 'react'
import { Select} from '@chakra-ui/react'
import {Env} from '../../types/env'
import DatePicker, {DateObject} from 'react-multi-date-picker'
import './datePicker.css'
import { PGButton } from '../UIcomponents'

declare global {
  interface Window {
    env: Env
  }
}

interface DatePickerOptions {
  selected:Date | DateObject,
  anotherDate:Date,
  datePickerType?:'startDate' | 'endDate',
  onChangeCallBack:(date:Date|DateObject) => void

}

const VantageDatePicker = (props: DatePickerOptions) => {
  const [startDate, setStartDate] = useState(props.selected)
  const endDate: Date = props.anotherDate
  const datePickerType = props.datePickerType
  const datePickerRef = useRef<any>()
  const startDateToday = () => {
    setStartDate(new Date())
    props.onChangeCallBack(new Date())
    const elm: any = document.querySelector('.react-datepicker__tab-loop')

    if (elm) {
      elm.style.display = 'none'
    }
  }
  const onQuickSelect = (event: any) => {
    const selectedValue = event.target.value

    if (selectedValue !== 0) {
      const newEndDate = new Date(endDate)
      newEndDate.setFullYear(newEndDate.getFullYear() - selectedValue)
      setStartDate(newEndDate)
      props.onChangeCallBack(new Date(newEndDate))
    } else {
      setStartDate(new Date())
      props.onChangeCallBack(new Date())
    }

    if (datePickerRef.current) {
      datePickerRef.current.closeCalendar()
    }
  }

  function DatePickerDropDown() {
    return (
      <div>
        <Select m="3%" w="94%" onChange={onQuickSelect}>
          <option>Quick Select Options</option>
          <option value="1">Last 1 Year</option>
          <option value="3">Last 3 Year</option>
          <option value="0">Today</option>
        </Select>
      </div>
    )
  }

  function DatePickerButton() {
    return (
      <div>
        <PGButton clickHandler={() => startDateToday()} props={{w:'95%',mt:'2'}} >Today</PGButton>
      </div>
    )
  }

  if (datePickerType !== null && datePickerType !== undefined) {
    if (datePickerType.toString() === 'startDate') {
      return (
        <DatePicker
          value={startDate}
          ref={datePickerRef}
          onChange={(date: DateObject) => {
            setStartDate(date)
            props.onChangeCallBack(date)
          }}>
          <DatePickerDropDown />
        </DatePicker>
      )
    } else if (datePickerType.toString() === 'endDate') {
      return (
        <DatePicker
          value={startDate}
          onChange={(date: DateObject) => {
            setStartDate(date)
            props.onChangeCallBack(date)
          }}>
          <DatePickerButton />
        </DatePicker>
      )
    } else {
      return (
        <DatePicker
          value={startDate}
          onChange={(date: DateObject) => {
            setStartDate(date)
            props.onChangeCallBack(date)
          }} />
      )
    }
  } else {
    return (
      <DatePicker
        value={startDate}
        onChange={(date: DateObject) => {
          setStartDate(date)
          props.onChangeCallBack(date)
        }} />
    )
  }
}

export default VantageDatePicker