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

const NotificationPermissionControl = () => {
  const {
    loading,
    isSupported,
    isNotificationEnable,
    handleDisableNotificationClick,
    handleEnableNotificationClick,
  } = useNotificationControl();
  const showEnableNotification = useCallback(() => {

  }, []);
  return (
    <Form.Item
      label={'启用通知'}
      tooltip={'分享 - 添加至桌面/主屏幕后，可接收通知'}
    >
      {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>
  );
};

export default NotificationPermissionControl;