---

import classNames from 'classnames';
import { Button, Divider, Tooltip } from 'exchange-elements/v2';

import { Dispatch, SetStateAction, useRef, useState } from 'react';

import { MenuList } from '@src/components/Menu';
import SplitDropdown from '@src/components/SplitDropdown';

import { geometricShapes, measurementTools, trendLines } from '@src/components/Toolbar/constants';

import { DrawingsNames } from '@src/constants';
import { ensureDefined } from '@src/utils';

import {
  CrossIcon,
  EyeBrushIcon,
  HeartIcon,
  LayersIcon,
  MagnetIcon,
  PencilLockerIcon,
  RulerIcon,
  SlidersCircleIcon,
  SplineCurveIcon,
  TrashIcon,
  TypeIcon,
  UnlockIcon,
  ZoomInIcon,
} from '../Icon';

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

interface ToolbarProps {
  toggleDOM: () => void;
  addDrawing: (name: DrawingsNames) => void;
}

const implemented = {
  crosshair: true,
  lines: true,
  fib: false,
  rectangle: true,
  text: false,
  XABCD: false,
  position: true,
  icons: false,
};

export default function Toolbar({ toggleDOM, addDrawing }: ToolbarProps) {
  const [selectedLineType, setSelectedLineType] = useState<DrawingsNames>(DrawingsNames.trendLine);
  const [selectedMeasurementTool, setSelectedMeasurementTool] = useState(DrawingsNames.fixedProfile);
  const [selectedGeometricShape, setSelectedGeometricShape] = useState(DrawingsNames.rectangle);

  const toolbarRef = useRef<HTMLDivElement | null>(null);

  const createDrawingHandler = (setter: Dispatch<SetStateAction<DrawingsNames>>) => (value: DrawingsNames) => {
    setter(value);
    addDrawing(value);
  };

  const findOptionByValue = <T extends { value: string }>(options: T[], selectedValue: T['value']): T | undefined =>
    options.find((item) => item.value === selectedValue);

  const selectedTrendLineOption = findOptionByValue(trendLines, selectedLineType);
  const selectedMeasurementToolOption = findOptionByValue(measurementTools, selectedMeasurementTool);
  const selectedGeometricShapeOption = findOptionByValue(geometricShapes, selectedGeometricShape);

  return (
    <div
      ref={toolbarRef}
      className={styles.toolbar}
    >
      <div className={classNames(styles.group)}>
        {implemented.crosshair && (
          <Tooltip
            tooltipClassName={styles.tooltipHint}
            showMessageOnFocus
            label="Перекрестие"
            location="right"
          >
            <Button
              size="sm"
              className={`${styles.button} ${styles.pressed}`}
              label={<CrossIcon />}
            />
          </Tooltip>
        )}
        {implemented.lines && (
          <SplitDropdown
            anchorRef={toolbarRef}
            mainContent={ensureDefined(selectedTrendLineOption?.icon)}
            mainTooltip={ensureDefined(selectedTrendLineOption).label}
            onMainClick={() => addDrawing(selectedLineType)}
            menuTooltip="Линии тренда"
          >
            <MenuList
              mode="single"
              value={selectedLineType}
              options={trendLines}
              onClick={createDrawingHandler(setSelectedLineType)}
            />
          </SplitDropdown>
        )}
        {implemented.fib && (
          <Tooltip
            tooltipClassName={styles.tooltipHint}
            showMessageOnFocus
            label="Коррекция по Фибоначчи"
            location="right"
          >
            <Button
              size="sm"
              className={styles.button}
              onClick={() => {}}
              label={<SlidersCircleIcon />}
            />
          </Tooltip>
        )}
        {implemented.rectangle && (
          <SplitDropdown
            anchorRef={toolbarRef}
            mainContent={ensureDefined(selectedGeometricShapeOption?.icon)}
            mainTooltip={ensureDefined(selectedGeometricShapeOption).label}
            onMainClick={() => addDrawing(selectedGeometricShape)}
            menuTooltip="Геометрические фигуры"
          >
            <MenuList
              mode="single"
              value={selectedGeometricShape}
              options={geometricShapes}
              onClick={createDrawingHandler(setSelectedGeometricShape)}
            />
          </SplitDropdown>
        )}
        {implemented.text && (
          <Tooltip
            tooltipClassName={styles.tooltipHint}
            showMessageOnFocus
            label="Текст"
            location="right"
          >
            <Button
              size="sm"
              className={styles.button}
              onClick={() => {}}
              label={<TypeIcon />}
            />
          </Tooltip>
        )}
        {implemented.XABCD && (
          <Tooltip
            tooltipClassName={styles.tooltipHint}
            showMessageOnFocus
            label="Шаблон XABCD"
            location="right"
          >
            <Button
              size="sm"
              className={styles.button}
              onClick={() => {}}
              label={<SplineCurveIcon />}
            />
          </Tooltip>
        )}
        {implemented.position && (
          <SplitDropdown
            anchorRef={toolbarRef}
            mainContent={ensureDefined(selectedMeasurementToolOption?.icon)}
            mainTooltip={ensureDefined(selectedMeasurementToolOption).label}
            menuTooltip="Инструменты для измерения и прогнозирования"
            onMainClick={() => addDrawing(selectedMeasurementTool)}
          >
            <MenuList
              mode="single"
              value={selectedMeasurementTool}
              options={measurementTools}
              onClick={createDrawingHandler(setSelectedMeasurementTool)}
            />
          </SplitDropdown>
        )}
        {implemented.icons && (
          <Tooltip
            label="Значок"
            location="right"
            tooltipClassName={styles.tooltipHint}
            showMessageOnFocus
          >
            <Button
              size="sm"
              className={styles.button}
              onClick={() => {}}
              label={<HeartIcon />}
            />
          </Tooltip>
        )}
      </div>
      <Divider
        direction="horizontal"
        pt={{ divider: { className: styles.divider } }}
      />
      <div className={classNames(styles.group)}>
        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Линейка"
          location="right"
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => addDrawing(DrawingsNames.ruler)}
            label={<RulerIcon />}
          />
        </Tooltip>

        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Увеличить масштаб"
          location="right"
          className={styles.notImplemented}
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => {}}
            label={<ZoomInIcon />}
          />
        </Tooltip>
      </div>
      <Divider
        direction="horizontal"
        pt={{ divider: { className: classNames(styles.divider, styles.notImplemented) } }}
      />
      <div className={classNames(styles.group, styles.notImplemented)}>
        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Магнит позволяет притягивать точки объектов к ближайшим ценам (откр., макс., мин., закр.) баров"
          location="right"
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => {}}
            label={<MagnetIcon />}
          />
        </Tooltip>

        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Продолжить в режиме рисования"
          location="right"
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => {}}
            label={<PencilLockerIcon />}
          />
        </Tooltip>

        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Зафиксировать все объекты"
          location="right"
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => {}}
            label={<UnlockIcon />}
          />
        </Tooltip>

        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Скрыть все объекты рисования"
          location="right"
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => {}}
            label={<EyeBrushIcon />}
          />
        </Tooltip>
      </div>
      <Divider
        direction="horizontal"
        pt={{ divider: { className: classNames(styles.divider, styles.notImplemented) } }}
      />
      <div className={classNames(styles.group)}>
        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Удалить объекты"
          location="right"
          className={styles.notImplemented}
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => {}}
            label={<TrashIcon />}
          />
        </Tooltip>

        <Tooltip
          tooltipClassName={styles.tooltipHint}
          showMessageOnFocus
          label="Дерево объектов"
          location="right"
        >
          <Button
            size="sm"
            className={styles.button}
            onClick={() => toggleDOM()}
            label={<LayersIcon />}
          />
        </Tooltip>
      </div>
    </div>
  );
}