---

import { Dropdown } from 'antd';
import locale from 'antd/es/date-picker/locale/ru_RU';
import React, { useCallback, 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,
  currentDateBond,
  handleChangeCurrentDateBond,
}) => {
  const preparedBonds = useMemo(
    () =>
      [...bondTradingModes]
        .sort((first, second) => sortArray(first.value, second.value))
        .map((item) => ({
          title: item.label,
          subTitle: item.value,
          value: item.value,
        })),
    [bondTradingModes],
  );

  const preparedBondsInstruments = useMemo(
    () =>
      [...bondInstruments]
        .sort((first, second) => sortArray(first.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 = useCallback(() => {
    setOpen((prev) => !prev);
  }, []);

  const handleToggleInstrumentDropdown = useCallback(() => {
    setOpenInstruments((prev) => !prev);
  }, []);

  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.find(
      ({ value }) => value === currentBondInstrument,
    );

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

  const renderInstrumentDropdown = useCallback(
    () => (
      <div ref={instrumentPopupRef}>
        <Dropdown>
          <BigDropdown
            placeholderCustomName="Введите название инструмента"
            selectedItemProps={currentBondInstrument}
            dropdownItems={preparedBondsInstruments}
            onClick={(value) => {
              handleChangeBondInstrumentsFilter(value);
              handleToggleInstrumentDropdown();
            }}
          />
        </Dropdown>
      </div>
    ),
    [
      currentBondInstrument,
      preparedBondsInstruments,
      handleChangeBondInstrumentsFilter,
      handleToggleInstrumentDropdown,
    ],
  );

  const renderBondsDropdown = useCallback(
    () => (
      <div ref={bondsPopupRef}>
        <Dropdown>
          <BigDropdown
            selectedItemProps={currentBondTradingMode}
            dropdownItems={preparedBonds}
            placeholderCustomName="Введите название режима торгов"
            onClick={(value) => {
              handleChangeBondTradingModesFilter(value);
              handleToggleBondsDropdown();
            }}
          />
        </Dropdown>
      </div>
    ),
    [
      currentBondTradingMode,
      preparedBonds,
      handleChangeBondTradingModesFilter,
      handleToggleBondsDropdown,
    ],
  );

  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={renderInstrumentDropdown}
          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={renderBondsDropdown}
          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>
  );
};