---

import React, { FC, lazy, useContext, useEffect, useState } from 'react';

import { DNDWrapper } from '@components/DNDWrapper';
import { InstrumentSearch } from '@components/InstrumentSearch';
import WidgetContentWrapper from '@components/WidgetContentWrapper';
import WidgetHeader from '@components/WidgetHeader';
import { useDropInstrument } from '@hooks/dnd';

import { useAppSelect } from '@hooks/useAppSelector';
import { useChangeProperties } from '@modules/widgetProperties';
import { getIsShowMoexChartInChart } from '@store/selectors/cachedData';
import { WidgetEnvContext } from '@terminal/desktop/workspaces/default/components/Widget/context';
import { Switch } from '@uikit/Switch';
import { useWidgetHeaderName } from '@utils/useWidgetName';

import useChartComponentFacade from './hooks/useChartComponentFacade';

import DEFAULT_PROPERTIES from './properties/defaultProperties';

import type { WidgetProperties } from './properties/types';
import type { ChartContainerProps } from './types';

const LazyTREntry = lazy(() => import('./components/MoexChart/MoexChart'));

export const Chart: FC<ChartContainerProps> = function (props): JSX.Element {
  const indicativeData = props.widgetContentProps?.indicativeData;

  const { updateProperties } = useChangeProperties<WidgetProperties>();

  const isShowMoexChartInChart = useAppSelect(getIsShowMoexChartInChart);

  const [isMoexChartShow, setIsMoexChartShow] = useState(
    // Доработка пошла хотфиксом, поэтому не стал исправлять все рабочие столы
    props.widgetContentProps?.isMoexChartShow ?? DEFAULT_PROPERTIES.isMoexChartShow,
  );

  const {
    chartContainerRef,
    dropDownOpen,
    setDropdownOpen,
    currentInstrument,
    handlerSaveAsExcel,
    setIsWidgetHeaderContextMenuOpen,
    isWidgetHeaderContextMenuOpen,
    onDropInstruments,
    addInstrumentFromModal,
    isOver,
  } = useChartComponentFacade(props);

  /* на дроп обновляем название бумаги в сторе
    и делаем апдейт на бэк, чтобы сохранить изменения
    при обновлении страницы */
  const { dropRef, isDragged } = useDropInstrument((dragData) => {
    onDropInstruments(dragData.properties.issKey, true);
  });

  const [isOpenEmptyAction, setIsOpenEmptyAction] = useState<boolean>(false);

  const openInstrumentModal = () => {
    setIsOpenEmptyAction(true);
    setIsWidgetHeaderContextMenuOpen(false);
  };

  // TODO: Зависит от сеток
  const { isDraggedOver } = useContext(WidgetEnvContext);
  const contractsInstrumentName = useWidgetHeaderName(currentInstrument.current);

  const instrumentName = indicativeData
    ? `${indicativeData.instrumentName} ${indicativeData.settlement} - ${indicativeData.firmName}`
    : contractsInstrumentName;

  useEffect(() => {
    updateProperties((state) => {
      state.isMoexChartShow = isMoexChartShow;
    });
  }, [isMoexChartShow, updateProperties]);

  return (
    <DNDWrapper
      ref={dropRef}
      isOver={isOver}
      canDrop
    >
      <WidgetHeader
        {...props}
        dropdownOpen={dropDownOpen}
        setDropdownOpen={setDropdownOpen}
        itemsSearchIcon={[true]}
        handlerSaveAsExcel={indicativeData ? null : handlerSaveAsExcel}
        addToWidgetNamePrefix={instrumentName}
        setIsOpenContextMenuFromWidget={setIsWidgetHeaderContextMenuOpen}
        isOpenContextMenuFromWidget={isWidgetHeaderContextMenuOpen}
        openInstrumentsModal={openInstrumentModal}
      />
      <WidgetContentWrapper {...props}>
        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
          {isShowMoexChartInChart && (
            <>
              <div style={{ padding: '8px 16px' }}>
                <Switch
                  onChange={setIsMoexChartShow}
                  value={isMoexChartShow}
                  checkedChildren="MOEX Charts"
                  unCheckedChildren="TradingView Charts"
                />
              </div>

              <LazyTREntry
                fullName={currentInstrument.current}
                widgetId={props.widgetId}
                isMoexChartShow={isMoexChartShow}
              />
            </>
          )}

          <div
            className="TVChartContainer"
            style={{
              width: '100%',
              height: '100%',
              pointerEvents: isDragged || isDraggedOver ? 'none' : 'inherit',
              display: !isMoexChartShow ? 'block' : 'none',
            }}
            ref={chartContainerRef}
          />

          {isOpenEmptyAction && (
            <InstrumentSearch
              setOpen={setIsOpenEmptyAction}
              isOpen={isOpenEmptyAction}
              variant="single"
              widgetId={props.widgetId}
              // withNRD={false}
              addInstruments={addInstrumentFromModal}
            />
          )}
        </div>
      </WidgetContentWrapper>
    </DNDWrapper>
  );
};





import React from 'react';

import { SymbolSearchModal } from '@widgets/Chart/components/MoexChart/components/SymbolSearchModal';

import { ChartIndicativeData } from '../../types';

import { CompareModal } from './components/CompareModal';
import { useMoexChart } from './hooks';

import 'moex-chart/dist/styles.css';

type TRProps = {
  fullName: string;
  indicativeData?: ChartIndicativeData | undefined;
  widgetId: number;
  isMoexChartShow: boolean | undefined;
};

export default React.memo(({ fullName, indicativeData, widgetId, isMoexChartShow }: TRProps) => {
  const {
    containerRef,
    isCompareOpen,
    isSymbolSearchOpen,
    compareManagerRef,
    setIsCompareOpen,
    setIsSymbolSearchOpen,
    setMainSymbol,
  } = useMoexChart({
    indicativeData,
    symbol: fullName,
    isMoexChartShow,
  });

  return (
    <div style={{ display: isMoexChartShow ? 'block' : 'none' }}>
      <div ref={containerRef} />

      {isCompareOpen && (
        <CompareModal
          onClose={() => setIsCompareOpen(false)}
          compareManager={compareManagerRef}
          widgetId={widgetId}
          isOpen={isCompareOpen}
          setOpen={setIsCompareOpen}
        />
      )}

      {isSymbolSearchOpen && (
        <SymbolSearchModal
          widgetId={widgetId}
          isOpen={isSymbolSearchOpen}
          setOpen={setIsSymbolSearchOpen}
          onSymbolChange={setMainSymbol}
        />
      )}
    </div>
  );
});