---

import { Dropdown, Form, MenuProps } from 'antd';
import locale from 'antd/es/date-picker/locale/ru_RU';
import dayjs from 'dayjs';
import 'dayjs/locale/ru';
import React, { FC, useMemo, useState } from 'react';

import { DatePickerLight } from '@components/DatePicker';
import { RoundedClose } from '@components/Icons/RoundedClose';
import { Table, useTableController } from '@components/Table';
import { ResizableColumnType } from '@components/Table/types/columns';
import { TextRegular } from '@components/TextMad';
import { Footnote } from '@components/TextUI';
import WidgetContentWrapper from '@components/WidgetContentWrapper';
import WidgetHeader from '@components/WidgetHeader';
import features from '@features';
import { useSettingsComponent } from '@hooks/table/useSettingsComponent';
import { Button } from '@uikit/Button';
import { Icon } from '@uikit/Icon';
import { FixingsValuesChart } from '@widgets/Fixings/FixingsValuesChart';
import { FixingsValuesTable } from '@widgets/Fixings/FixingsValuesTable';
import { FixingData, useFixingsFacade } from '@widgets/Fixings/useFixingsFacade';

import { VirtualTableColumnType } from 'types/TableColumns';
import { WidgetContentBasicProps } from 'types/Widgets';

import './fixings.scss';

dayjs.locale('ru');

export interface FixingsProps {
  state: {
    firstColumns: VirtualTableColumnType<FixingData>[];
  };
}

type WidgetFixingsProps = WidgetContentBasicProps<FixingsProps>;
type FixingTableRow = FixingData & Record<string, unknown>;

export const Fixings: FC<WidgetFixingsProps> = function (
  props: WidgetFixingsProps,
): React.JSX.Element {
  const {
    selectedFixing,
    filteredSelectedFixing,
    selectedRow,
    fixingsData,
    fromDate,
    toDate,
    onCloseButtonClick,
    onChangeDate,
    columns,
  } = useFixingsFacade();

  const [controller, requester] = useTableController<FixingTableRow>();
  const [activeOption, setActiveOption] = useState('table');
  const { settingsComponent, setSettingsComponent } = useSettingsComponent();

  const tableData = useMemo<FixingTableRow[]>(
    () => (fixingsData ?? []).map((item) => ({ ...item })),
    [fixingsData],
  );

  const tableColumns = useMemo<ResizableColumnType<FixingTableRow>[]>(
    () =>
      columns.map((column, index) => {
        const result = {
          key: column.key,
          dataIndex: column.dataIndex,
          title: column.title,
          type: column.type,
          align: column.align,
          hidden: column.hidden,
          width: typeof column.width === 'number' ? column.width : undefined,
          numbersFormatter: column.numbersFormatter,
          position: index,
          render: column.render
            ? (value, record, rowIndex) =>
                column.render?.(value, record, rowIndex ?? 0)
            : undefined,
        } satisfies ResizableColumnType<FixingTableRow>;

        return result;
      }),
    [columns],
  );

  const dropdownItems = [
    {
      label: (
        <div className="fixing-button">
          <div className="icon">
            <Icon variant="file-up" />
          </div>
          Экспортировать в Excel
        </div>
      ),
      key: '1',
    },
  ] as MenuProps;

  const settingsItems = [
    {
      key: '1',
      label: settingsComponent,
    },
  ];

  const { widgetId } = props;

  return (
    <>
      <WidgetHeader
        showWidgetSetting
        items={settingsItems}
        titleExtra={
          selectedRow && (
            <Footnote style={{ display: 'flex' }}>
              {selectedRow.ticker}
            </Footnote>
          )
        }
        handlerSaveAsExcel={
          features.hideSaveAsExcel ? undefined : controller?.saveAsExcel
        }
        {...props}
      />
      <WidgetContentWrapper
        {...props}
        scrollable={false}
      >
        {selectedRow && (
          <div className="header">
            <div className="header-btn-row">
              <Button
                variant={
                  activeOption === 'table'
                    ? 'filled-primary'
                    : 'outlined-secondary'
                }
                onClick={() => setActiveOption('table')}
                text="Таблица"
              />
              <Button
                variant={
                  activeOption === 'chart'
                    ? 'filled-primary'
                    : 'outlined-secondary'
                }
                onClick={() => setActiveOption('chart')}
                text="График"
              />
            </div>
            {selectedRow && (
              <div className="header-daterange">
                <Form.Item label="Значения с">
                  <DatePickerLight
                    className="header-daterange-datepicker"
                    locale={locale}
                    format="DD-MM-YYYY"
                    onChange={(date) => onChangeDate(date, true)}
                    defaultValue={dayjs(fromDate)}
                  />
                </Form.Item>
                <Form.Item label="до">
                  <DatePickerLight
                    className="header-daterange-datepicker"
                    locale={locale}
                    format="DD-MM-YYYY"
                    onChange={(date) => onChangeDate(date, false)}
                    defaultValue={dayjs(toDate)}
                  />
                </Form.Item>
              </div>
            )}
            <div
              onClick={onCloseButtonClick}
              className="icon"
            >
              <RoundedClose />
            </div>
          </div>
        )}

        {!selectedRow && (
          <div className="fixing">
            <Table<FixingTableRow>
              widgetId={widgetId}
              columns={tableColumns}
              dataSource={tableData}
              setSettingsComponent={setSettingsComponent}
              setController={requester}
            />
          </div>
        )}

        {selectedRow && activeOption === 'table' && (
          <Dropdown
            menu={dropdownItems}
            trigger={['contextMenu']}
          >
            <div>
              <FixingsValuesTable
                fixingSelectedValue={filteredSelectedFixing || selectedFixing}
                widgetId={widgetId}
              />
            </div>
          </Dropdown>
        )}

        {selectedRow && activeOption === 'chart' && (
          <>
            <TextRegular className="fixing-title">
              {selectedRow.caption}
            </TextRegular>
            <FixingsValuesChart
              fixingSelectedValue={filteredSelectedFixing || selectedFixing}
            />
          </>
        )}
      </WidgetContentWrapper>
    </>
  );
};