---

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

import { useRef } from 'react';
import { Observable } from 'rxjs';

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

export const SettingsModal = ({ changeTimeFormat, changeDateFormat, chartDateTimeFormatObs }: SettingsModalProps) => {
  const scopeRef = useRef(null);
  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 && (
            <Select
              classNames={{ dropdown: styles.dropdown, input: styles.input_wrapper }}
              inputClassNames={styles.input}
              onChange={(value: TimeFormat) => changeTimeFormat(value)}
              options={[
                {
                  label: '12h',
                  value: '12h',
                },
                {
                  label: '24h',
                  value: '24h',
                },
              ]}
              value={format.timeFormat}
              labelPos="top"
              size="sm"
            />
          )}
        </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 && (
            <Select
              classNames={{ dropdown: styles.dropdown, input: styles.input_wrapper }}
              inputClassNames={styles.input}
              onChange={(value: DateFormat) => changeDateFormat(value)}
              options={dateFormatOptions}
              value={format.dateFormat}
              labelPos="top"
              size="sm"
            />
          )}
        </Col>
      </Row>
    </Flex>
  );
};