import { useEffect, useState } from 'react';
import { Typography } from 'antd';
// import { useConversationState } from '@/stores/ConversationContext';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const LocalTimeClock = ((props) => {
  // const { customerOrderProfile: orderInfo } = useConversationState();

  const [customerDateTime, setCustomerDateTime] = useState();

  // todo: 用dayjs 显示指定时区的时间
  useEffect(() => {
    const intervalId = setInterval(() => {
      // if (customerProfile && customerProfile.timezone) {
      const date = new Date();
      const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        hour12: true,
      };
      const formatter = new Intl.DateTimeFormat('cn-ZH', options); // todo:
      setCustomerDateTime(formatter.format(date));
      // }
    }, 1000); // Update every second

    // Cleanup function to clear the interval when the component is unmounted
    return () => clearInterval(intervalId);
  }, []);
  return (
    <>
      <Typography.Text>{customerDateTime}</Typography.Text>
    </>
  );
});
export default LocalTimeClock;