import { Button, Drawer, Flex, Form, Switch, Typography } from "antd";
import { useNotificationControl } from "../hooks/useNotificationControl";
import { useCallback, useState } from "react";

const NotificationPermissionControl = () => {
  const {
    loading,
    isSupported,
    isNotificationEnable,
    handleDisableNotificationClick,
    handleEnableNotificationClick,
  } = useNotificationControl();
  const [open, setOpen] = useState(false);
  const showEnableNotification = useCallback(() => {
    setOpen(true);
  }, []);
  return (
    <>
      <Form.Item label={'启用通知'}>
        {isSupported ? (
          <Switch
            loading={loading}
            disabled={!isSupported}
            value={isNotificationEnable}
            onChange={checked => {
              if (checked) {
                handleEnableNotificationClick();
              } else {
                handleDisableNotificationClick();
              }
            }}
          />
        ) : (
          <Flex align="center" justify="center" wrap>
            <Typography.Text type='secondary'>
              当前模式不支持通知功
            </Typography.Text>
            <Button type="link" onClick={showEnableNotification}>查看开启方法</Button>
          </Flex>
        )}
      </Form.Item>
      <Drawer
        placement="bottom"
        open={open}
        onClose={() => setOpen(false)}
        title={'帮助'}
      >
        <Typography.Title level={4}>
          1. 使用系统默认浏览器打开本网站
        </Typography.Title>
        <Typography.Text>
          iOS 设备使用 Safari 浏览器
        </Typography.Text>
        <Typography.Title level={4}>
          2. 点击分享
        </Typography.Title>
        <Typography.Title level={4}>
          3. 点击添加到主屏幕
        </Typography.Title>
        <Typography.Title level={4}>
          4. 从主屏幕的应用中打开网站进行设置
        </Typography.Title>
      </Drawer>
    </>
  );
};

export default NotificationPermissionControl;