---

import { Tooltip } from 'exchange-elements/v2';

import { ColorPicker, normalizeHexColor } from '@src/components/ColorPicker';
import { Dropdown } from '@src/components/Dropdown';
import { t } from '@src/translations';

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

import type { ToolbarColorRole } from '@src/types/settings';

interface ToolbarColorControlProps {
  role: ToolbarColorRole;
  value: string;
  onChange: (value: string) => void;
}

const LABEL_KEY_BY_ROLE = {
  line: 'Line color',
  fill: 'Fill color',
  text: 'Text color',
} as const;

export function ToolbarColorControl({ role, value, onChange }: ToolbarColorControlProps) {
  const currentColor = normalizeHexColor(value);

  return (
    <Dropdown
      position="bottom"
      horizontalAlign="auto"
      menuClassName={styles.toolbar__menu}
      renderTrigger={({ onToggle }) => (
        <Tooltip
          tooltipClassName={styles.toolbar__tooltip}
          showMessageOnFocus
          label={t(LABEL_KEY_BY_ROLE[role])}
          location="top"
        >
          <button
            type="button"
            className={styles.toolbar__trigger}
            onClick={onToggle}
          >
            <span className={styles.toolbar__icon} />
            <span
              className={styles['toolbar__preview-value']}
              style={{ backgroundColor: currentColor }}
            />
          </button>
        </Tooltip>
      )}
    >
      <ColorPicker
        value={currentColor}
        onChange={onChange}
      />
    </Dropdown>
  );
}