---

import { Dropdown } from 'antd';
import locale from 'antd/es/date-picker/locale/ru_RU';
import React, { useEffect, useMemo, useRef, useState } from 'react';

import { DatePickerDark } from '@components/DatePicker';
import { DEFAULT_DATE } from '@components/DatePicker/DatePickerMad';
import { ClearInputIcon } from '@components/Icons/ClearInputIcon';
import { SelectDark, SelectLight } from '@components/Select';
import { TextMedium } from '@components/TextMad';
import { getDateFormat } from '@configs/standartDateFormat';
import useClickOutside from '@hooks/useClickOutside';

import { Icon } from '@uikit/Icon';

import styles from '../../tradingResult.module.scss';
import { dataPickerGroupDisabled, sortArray } from '../../utilites';
import { BigDropdown } from '../BigDropdown';

import type { Dayjs } from 'dayjs';

import '../../tradingResult.scss';

interface IBondsFilters {
  containerWidth: number;
  currentBondInstrument?: string;
  handleChangeBondInstrumentsFilter: (value?: string) => void;
  bondInstruments: { label: string; value: string }[];
  currentBondTradingMode?: string;
  handleChangeBondTradingModesFilter: (value?: string) => void;
  bondTradingModes: { label: string; value: string }[];
  handleSearchBond: (value: string) => void;
  currentDateBond: Dayjs;
  handleChangeCurrentDateBond: (value: Dayjs) => void;
}

const calculateMaxContainerWidth = (widgetWidth: number) =>
  // поменять при изменении наполнения контейнера фильтров
  widgetWidth < 933 ? { maxWidth: '409px' } : { maxWidth: '627px' };

export const BondFilters: React.FC<IBondsFilters> = ({
  containerWidth,
  currentBondInstrument,
  handleChangeBondInstrumentsFilter,
  bondInstruments,
  currentBondTradingMode,
  handleChangeBondTradingModesFilter,
  bondTradingModes,
  handleSearchBond,
  currentDateBond,
  handleChangeCurrentDateBond,
}) => {
  const preparedBonds = useMemo(
    () =>
      bondTradingModes
        ?.sort((fist, second) => sortArray(fist.value, second.value))
        .map((item) => ({ title: item.label, subTitle: item.value, value: item.value })),
    [bondTradingModes],
  );

  const preparedBondsInstruments = useMemo(
    () =>
      bondInstruments
        .sort((fist, second) => sortArray(fist.label, second.label))
        .map((item) => ({ title: item.label, value: item.value, subTitle: item.value })),
    [bondInstruments],
  );
  const [open, setOpen] = useState(false);
  const [openInstruments, setOpenInstruments] = useState(false);

  const [bondLabel, setBondLabel] = useState<null | string>(null);
  const [instrumentLabel, setInstrumentLabel] = useState<null | string>(null);

  const bondsPopupRef = useRef<HTMLDivElement | null>(null);
  const instrumentPopupRef = useRef<HTMLDivElement | null>(null);

  const handleToggleBondsDropdown = () => {
    setOpen(!open);
  };

  const handleToggleInstrumentDropdown = () => {
    setOpenInstruments(!openInstruments);
  };

  useClickOutside(instrumentPopupRef, () => setOpenInstruments(false));

  useClickOutside(bondsPopupRef, () => setOpen(false));

  useEffect(() => {
    const matchedOption = bondTradingModes?.find(({ value }) => value === currentBondTradingMode);

    setBondLabel(matchedOption ? matchedOption.label : null);
  }, [currentBondTradingMode, bondTradingModes]);

  useEffect(() => {
    const matchedOption = bondInstruments.filter((item) => item.value === currentBondInstrument);

    setInstrumentLabel(matchedOption?.[0]?.label ?? null);
  }, [currentBondInstrument, bondInstruments]);

  return (
    <div
      style={calculateMaxContainerWidth(containerWidth)}
      className={styles.groupFiltersContainer}
    >
      <div className={styles.groupFiltersItem}>
        <SelectDark
          popupMatchSelectWidth={false}
          placeholder="Инструмент"
          open={openInstruments}
          className={styles.groupFiltersItem}
          value={instrumentLabel}
          onClick={handleToggleInstrumentDropdown}
          notFoundContent={
            <div style={{ padding: '4px' }}>
              <TextMedium>Нет данных</TextMedium>
            </div>
          }
          dropdownRender={() => (
            <div ref={instrumentPopupRef}>
              <Dropdown>
                <BigDropdown
                  placeholderCustomName="Введите название инструмента"
                  selectedItemProps={currentBondInstrument}
                  dropdownItems={preparedBondsInstruments}
                  onClick={(value) => {
                    handleChangeBondInstrumentsFilter(value);
                    handleToggleInstrumentDropdown();
                  }}
                />
              </Dropdown>
            </div>
          )}
          suffixIcon={currentBondInstrument ? null : <Icon variant="chevron-down" />}
        />
        {currentBondInstrument && (
          <div
            className={styles['clear-input-icon']}
            onClick={() => handleChangeBondInstrumentsFilter(undefined)}
          >
            <ClearInputIcon />
          </div>
        )}
      </div>

      <div className={styles.groupFiltersItem}>
        <SelectLight
          value={bondLabel}
          className={styles.groupFiltersItem}
          popupMatchSelectWidth={false}
          placeholder="Режим торгов"
          open={open}
          onClick={handleToggleBondsDropdown}
          dropdownRender={() => (
            <div ref={bondsPopupRef}>
              <Dropdown>
                <BigDropdown
                  selectedItemProps={currentBondTradingMode}
                  dropdownItems={preparedBonds}
                  placeholderCustomName="Введите название режима торгов"
                  onClick={(value) => {
                    handleChangeBondTradingModesFilter(value);
                    handleToggleBondsDropdown();
                  }}
                />
              </Dropdown>
            </div>
          )}
          suffixIcon={currentBondTradingMode ? null : <Icon variant="chevron-down" />}
        />
        {currentBondTradingMode && (
          <div
            className={styles['clear-input-icon']}
            onClick={() => handleChangeBondTradingModesFilter(undefined)}
          >
            <ClearInputIcon />
          </div>
        )}
      </div>

      <DatePickerDark
        disabledDate={dataPickerGroupDisabled}
        format={getDateFormat}
        value={currentDateBond}
        locale={locale}
        className={styles.groupFiltersItem}
        onChange={(date) => {
          handleChangeCurrentDateBond(date ?? DEFAULT_DATE);
        }}
      />
    </div>
  );
};