import React from 'react';
import { useSelector } from 'react-redux';
import dayjs from 'dayjs';
import timezonePlugin from 'dayjs/plugin/timezone';
import utcPlugin from 'dayjs/plugin/utc';
import { InfoOutlined } from '@mui/icons-material';

import { getUserTimezoneSelector } from '@/modules/@common/user/redux/selectors';

import { Tooltip, Typography } from '@/mui/components';

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

dayjs.extend(utcPlugin);
dayjs.extend(timezonePlugin);

function Timezone() {
  const timezone = useSelector(getUserTimezoneSelector);
  const timezoneOffset = dayjs().tz(timezone).utcOffset() / 60;
  return (
    <div className={styles.Timezone}>
      <Tooltip title="All timestamps are recalculated and displayed in your timezone" placement="top">
        <span>
          <InfoOutlined fontSize="small" htmlColor="info.main" className={styles.InfoIcon} />
        </span>
      </Tooltip>
      <Typography variant="caption" color="info.main">
        {`All time displayed in UTC ${timezoneOffset > 0 ? `+${timezoneOffset}` : timezoneOffset}`}
      </Typography>
    </div>
  );
}

export default Timezone;
