/* eslint-disable react/jsx-props-no-spreading */
import React, { FC, useState } from 'react';
import moment from 'moment';
import { Line } from './Line';
import { Wrapper } from '../../Wrapper';
import { Title } from '../../Title';
import { Chip } from '../../Chip';
import { ToggleButtonGroupComponent } from '../../ToggleButtonGroup';
import { Calendar, CalendarDate, RangePickerDatesType } from '../../Calendar';
import { WrappedLineProps } from '../types.d';

export const WrappedLine: FC<WrappedLineProps> = (props) => {
  const {
    wrapperProps,
    title,
    titleProps,
    chartData,
    calendarProps,
    toggleProps,
    onChangeDates,
    monthSelectProps,
    formatDate = 'MMM DD, YYYY',
  } = props;

  const [isVisibleCalendar, setIsVisibleCalendar] = useState(false);
  const [isVisibleChip, setIsVisibleChip] = useState(false);
  const [rangePickerDates, setRangePickerDates] = React.useState<RangePickerDatesType>({
    firstDate: null,
    secondDate: null,
  });

  const [isVisibleMonthSelection, setIsVisibleMonthSelection] = useState(false);
  const [monthSelect, setMonthSelect] = useState<CalendarDate>(moment());

  const [toggleValue, setToggleValue] = useState<string | null | number>(toggleProps.valueOfBtns[1]);
  const handleToggle = (event: React.MouseEvent<HTMLElement>, value: string | null | number) => {
    if (event.currentTarget.innerText === toggleProps.valueOfBtns[0]) {
      setIsVisibleCalendar((prev) => !prev);
      setIsVisibleMonthSelection(false);
    }
    if (event.currentTarget.innerText === toggleProps.valueOfBtns[1]) {
      setIsVisibleMonthSelection((prev) => !prev);
      setIsVisibleCalendar(false);
    }
    if (value !== null) setToggleValue(value);
  };

  const [chipValue, setChipValue] = React.useState('');
  const handleChipDelete = () => {
    setIsVisibleChip(false);
    setChipValue('');
    setRangePickerDates({ firstDate: null, secondDate: null });
  };
  const handleButtonCancel = () => {
    setIsVisibleCalendar(false);
  };

  const handleButtonSave = () => {
    setIsVisibleCalendar(false);
    const dates =
      rangePickerDates.secondDate !== null
        ? `${moment(rangePickerDates.firstDate).format(formatDate)} - ${moment(rangePickerDates.secondDate).format(formatDate)}`
        : `${moment(rangePickerDates.firstDate).format(formatDate)} - ${moment(rangePickerDates.firstDate).format(formatDate)}`;
    setChipValue(dates);
    setIsVisibleChip(true);

    onChangeDates(rangePickerDates);
  };

  const handleMonthSelection = (date: CalendarDate) => {
    if (moment(date).get('month') !== moment(monthSelect).get('month')) {
      const firstDate = moment(date).startOf('month');
      const secondDate = moment(date).endOf('month');
      const dates = `${firstDate.format(formatDate)} - ${secondDate.format(formatDate)}`;
      setChipValue(dates);
      setIsVisibleChip(true);
      setIsVisibleMonthSelection(false);
      setMonthSelect(null);
      onChangeDates({ firstDate, secondDate });
    } else setMonthSelect(date);
  };

  return (
    <Wrapper {...wrapperProps}>
      <div className="chart-line-style">
        <div className="chartLineHeader">
          <div className="chartLineHeader-title">{title ? <Title {...titleProps}>{title}</Title> : null}</div>
          <div className="chartLineHeader-input">
            {isVisibleChip ? <Chip onDelete={handleChipDelete} label={chipValue} clickable /> : null}
          </div>
          <div className="chartLineHeader-button">
            <ToggleButtonGroupComponent
              {...toggleProps}
              value={toggleValue}
              onChange={handleToggle}
              numberOfBtns={[0, 1]}
              className="toggle-button-group"
            />
            <Calendar.DateRangePicker
              {...calendarProps}
              wrapperProps={{
                id: 'chart-line-calendar',
              }}
              isVisible={isVisibleCalendar}
              onChange={setRangePickerDates}
              buttonCancel={{
                ...calendarProps.buttonCancel,
                onClick: handleButtonCancel,
              }}
              buttonSave={{
                ...calendarProps.buttonSave,
                onClick: handleButtonSave,
              }}
            />
            <Calendar.MonthSelection
              {...monthSelectProps}
              value={monthSelect}
              onChange={(date) => handleMonthSelection(date)}
              isVisible={isVisibleMonthSelection}
            />
          </div>
        </div>
        <Line {...chartData} />
      </div>
    </Wrapper>
  );
};
