---

import type { TableProps } from 'antd';
import cn from 'classnames';
import React from 'react';

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

import styles from './styles.module.scss';

type ExpandIconProps<T extends Record<string, unknown>> = Parameters<
  NonNullable<NonNullable<TableProps<T>['expandable']>['expandIcon']>
>[0];

/** Используется только в индикативных котировках. Провести анализ на общий табличный компонент */
export const ExpandRowButton = <T extends Record<string, unknown>>({
  onExpand,
  record,
  expanded,
}: ExpandIconProps<T>) =>
  record?.children ? (
    <div
      className={cn(styles.expandIconWrapper, expanded && styles.rotated)}
      onClick={(e: React.MouseEvent<HTMLElement>) => onExpand(record, e)}
    >
      <Icon variant="chevron-down" />
    </div>
  ) : null;


















const dropdownRender = useCallback(
  () => (
    <CustomGroupCellMenu
      variants={valueVariants ?? []}
      onSelectHandler={onSelectHandler}
      selectedItemKey={value}
      groupKey={groupKey}
      groupValue={groupValue}
    />
  ),
  [
    valueVariants,
    onSelectHandler,
    value,
    groupKey,
    groupValue,
  ],
);

















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();
  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) => ({
        ...column,
        position: column.position ?? index,
      })),
    [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>

            <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>
        )}

        {true && (
          <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>
    </>
  );
};