---

import classNames from 'classnames';
import dayjs from 'dayjs';

import { Button, Tooltip } from 'exchange-elements/v2';
import { useEffect, useState } from 'react';
import { Observable } from 'rxjs';

import { CHART_SCROLLABLE_CLASSNAME } from '@src/constants';
import { t } from '@src/translations';

import { Intervals, IntervalsToTimeframe, Timeframes } from '@src/types';

import { formatUtcOffset, useObservable } from '@src/utils';

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

interface FooterProps {
  intervalObs: Observable<Intervals | null>;
  setInterval: (next: Intervals) => void;
  supportedTimeframes: Timeframes[];
}

export function Footer({ setInterval: setIntervalValue, intervalObs, supportedTimeframes }: FooterProps) {
  const [currentTime, setCurrentTime] = useState(dayjs().format('HH:mm:ss'));
  const selectedInterval = useObservable<null | Intervals>(intervalObs);

  const utcOffset = formatUtcOffset();

  useEffect(() => {
    const intervalId = setInterval(() => setCurrentTime(dayjs().format('HH:mm:ss')), 1000);

    return () => clearInterval(intervalId);
  }, []);

  return (
    <footer className={styles.footer}>
      <div className={classNames(styles.intervals, CHART_SCROLLABLE_CLASSNAME)}>
        {(Object.keys(Intervals) as Intervals[])
          .filter((interval: Intervals) => {
            if (!IntervalsToTimeframe[interval]) {
              return false;
            }

            return supportedTimeframes.includes(IntervalsToTimeframe[interval]);
          })
          .map((interval) => (
            <Tooltip
              tooltipClassName={styles.tooltip}
              key={interval}
              label={`${t(interval)} ${t('interval for')} ${t(IntervalsToTimeframe[interval] as string)} ${t('timeframe')}`}
            >
              <Button
                key={interval}
                size="sm"
                variant="solid"
                className={`${styles.interval} ${interval === selectedInterval ? styles.pressed : ''}`}
                onClick={() => setIntervalValue(interval)}
                label={t(interval)}
              />
            </Tooltip>
          ))}
      </div>
      <span className={styles.time}>
        {currentTime} UTC{utcOffset}
      </span>
    </footer>
  );
}