import React from 'react';
import * as Popover from '@radix-ui/react-popover';
import { QuestionMarkIcon, Cross2Icon } from '@radix-ui/react-icons';
import { useSessionStorage } from 'react-use';
import FPlatformEnum from '../../utils/enum';
import { useCopyToClipboard } from 'react-use';
import { notification } from 'antd';
import { useTranslation } from 'react-i18next';

const Version = () => {
  const [platform] = useSessionStorage('platform');
  const [clipboardState, copyToClipboard] = useCopyToClipboard();
  const { t, i18n } = useTranslation();
  const updateTime = '2023年6月29日 09点59分';
  // 复制当前版本号到剪贴板
  const handleCopyVersion = () => {
    copyToClipboard(updateTime + ' 杏聆荟学院 web');

    notification.open({
      description: t('版本号已复制到剪贴板🔗'),
      onClick: () => {
        console.log('Notification Clicked!');
      },
    });
  };
  return (
    <Popover.Root>
      <Popover.Trigger asChild>
        <button
          className='fixed right-5 bottom-5 z-40 rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-blue-500 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none'
          aria-label='Update dimensions'>
          <QuestionMarkIcon />
        </button>
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Content
          className='mr-3 rounded p-5 z-50 w-[300px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade'
          sideOffset={5}>
          <div className='flex flex-col gap-2.5'>
            <div className='text-mauve12 text-[15px] leading-[19px] font-medium'>
              {t('版本信息（开发用）')}
            </div>
            <div className='text-xs text-gray-500'>
              {t('最终版本不会存在此控件')}
            </div>
            <fieldset className='flex gap-5 items-center'>
              <label
                className='text-sm text-gray-800 w-[75px]'
                htmlFor='height'>
                {t('更新时间')}
              </label>
              <div className='text-xs text-gray-500'>{updateTime}</div>
            </fieldset>
            <fieldset className='flex gap-5 items-center'>
              <label
                className='text-sm text-gray-800 w-[75px]'
                htmlFor='height'>
                {t('平台标识')}
              </label>
              <div className='text-xs text-gray-500'>
                {platform + '  (' + FPlatformEnum.byIndex(platform).name + ')'}
              </div>
            </fieldset>
            <fieldset className='flex gap-5 items-center'>
              <label
                className='text-sm text-gray-800 w-[75px]'
                htmlFor='height'>
                {t('当前语言')}
              </label>
              <div className='text-xs text-gray-500'>{i18n.language}</div>
            </fieldset>
            <button
              className='text-xs text-gray-500 border rounded py-2'
              onClick={handleCopyVersion}>
              {t('复制版本号')}
            </button>
          </div>
          <Popover.Close
            className='rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-blue-500 absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default'
            aria-label='Close'>
            <Cross2Icon />
          </Popover.Close>
          <Popover.Arrow className='fill-white' />
        </Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
};

export default Version;
