import { Tooltip, Typography, Box, type SxProps } from '@mui/material';
import { useMemoizedFn } from 'ahooks';
import useClock from '../../hooks/use-clock';
import { translate } from '../../Locale/util';
import { useLocaleContext } from '../../Locale/context';

const translations = {
  en: {
    localTime: 'Local Time',
    timezonePhase: {
      dawn: 'AM',
      morning: 'AM',
      afternoon: 'PM',
      night: 'PM',
    },
  },
  zh: {
    localTime: '本地时间',
    timezonePhase: {
      dawn: '凌晨',
      morning: '上午',
      afternoon: '下午',
      night: '晚上',
    },
  },
};
export default function Clock({ value, ...props }: { value: string; sx?: SxProps; [key: string]: any }) {
  const { locale } = useLocaleContext() || { locale: 'en' };
  const t = useMemoizedFn((key, data = {}) => {
    return translate(translations, key, locale, 'en', data);
  });
  const timeInfo = useClock(value, locale);

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        flex: 1,
        justifyContent: 'flex-start',
        overflow: 'hidden',
        width: '100%',
      }}>
      <Typography
        {...props}
        noWrap
        component="span"
        sx={{
          flex: '0 1 auto',
          minWidth: 0,
          ...props.sx,
        }}>
        {value}
      </Typography>
      <Tooltip
        enterDelay={200}
        title={
          <span>
            {t('localTime')} {timeInfo.fullDateTime}
          </span>
        }
        placement="top"
        arrow>
        <Typography
          component="span"
          noWrap
          sx={{
            fontSize: 14,
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            flex: '0 0 auto',
            maxWidth: '100%',
          }}>
          ({locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : ''}
          {timeInfo.formattedTime})
        </Typography>
      </Tooltip>
    </Box>
  );
}
