---

import { Col, Flex, Row, Typography } from 'exchange-elements/v2';

import { Observable } from 'rxjs';

import { SelectField } from '@src/components/Fields';
import { TimeFormat } from '@src/types';
import { useObservable } from '@src/utils';
import { DateFormat, dateFormatOptions } from '@src/utils/formatter';

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

interface SettingsModalProps {
  changeTimeFormat: (value: TimeFormat) => void;
  changeDateFormat: (value: DateFormat) => void;
  chartDateTimeFormatObs: Observable<{ dateFormat: DateFormat; timeFormat: TimeFormat }>;
}

const timeFormatOptions = [
  { label: '12h', value: '12h' },
  { label: '24h', value: '24h' },
];

export const SettingsModal = ({
  changeTimeFormat,
  changeDateFormat,
  chartDateTimeFormatObs,
}: SettingsModalProps) => {
  const format = useObservable<{ dateFormat: DateFormat; timeFormat: TimeFormat }>(chartDateTimeFormatObs);

  return (
    <Flex
      direction="column"
      divider={null}
      spacing="0500"
      wrap="nowrap"
    >
      <Row>
        <Col
          breakpoints={{
            md: '4',
            sm: '4',
            xs: '2',
          }}
          layoutType="standard"
          type="fluid"
        >
          <Typography
            className={styles.typography}
            variant="body2"
          >
            Формат времени
          </Typography>
        </Col>

        <Col
          breakpoints={{
            md: '8',
            sm: '8',
            xs: '6',
          }}
          layoutType="standard"
          type="fluid"
        >
          {format?.timeFormat && (
            <SelectField
              value={format.timeFormat}
              options={timeFormatOptions}
              onValueChange={(value) => changeTimeFormat(value as TimeFormat)}
            />
          )}
        </Col>
      </Row>

      <Row>
        <Col
          breakpoints={{
            md: '4',
            sm: '4',
            xs: '2',
          }}
          layoutType="standard"
          type="fluid"
        >
          <Typography
            className={styles.typography}
            variant="body2"
          >
            Формат даты
          </Typography>
        </Col>

        <Col
          breakpoints={{
            md: '8',
            sm: '8',
            xs: '6',
          }}
          layoutType="standard"
          type="fluid"
        >
          {format?.dateFormat && (
            <SelectField
              value={format.dateFormat}
              options={dateFormatOptions}
              onValueChange={(value) => changeDateFormat(value as DateFormat)}
            />
          )}
        </Col>
      </Row>
    </Flex>
  );
};



import { memo, useEffect, useState } from 'react';
import { Select } from 'exchange-elements/v2';

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

interface SelectFieldProps {
  label?: string;
  value?: string;
  initialValue?: string;
  options: { label: string; value: string }[];
  onValueChange: (value: string) => void;
}

export const SelectField = memo(function SelectField({
  label,
  value,
  initialValue,
  options,
  onValueChange,
}: SelectFieldProps) {
  const [localValue, setLocalValue] = useState(initialValue ?? value ?? '');

  useEffect(() => {
    if (value !== undefined) {
      setLocalValue(value);
    }
  }, [value]);

  const handleChange = (nextValue: string) => {
    setLocalValue(nextValue);
    onValueChange(nextValue);
  };

  return (
    <Select
      classNames={{
        dropdown: styles.dropdown,
        input: styles.inputWrapper,
      }}
      inputClassNames={styles.input}
      value={localValue}
      onChange={handleChange}
      options={options}
      label={label}
      labelPos="top"
      size="sm"
    />
  );
});