import React from 'react';
import { authorizeStatus, showToast, Text, View, map, authorize } from '@ray-js/ray';
import { TopBar } from '@/components';
import { IconFont } from '@/components/icon-font';
import styles from './index.module.less';

const getLocation = (type: string) => {
  authorize({
    scope: type,
    success: e => {
      console.log(`authorize ${type} success`, e);
      const params = {
        type: 'wgs84',
        altitude: false,
        isHighAccuracy: false,
        highAccuracyExpireTime: 60000,
        complete: () => {
          console.log('Get Location Complete');
        },
        success: res => {
          console.log('location res :>> ', res);
          showToast({ title: '获取位置成功！', icon: 'success' });
        },
        fail: err => {
          console.log('err :>> ', err);
          showToast({
            title: '获取位置失败，请检查是否开启高精度定位权限！',
            icon: 'none',
          });
        },
      };
      map.getLocation(params);
    },
    fail: err => {
      console.log(`authorize ${type} fail`, err);
    },
    complete: () => {
      console.log(`authorize ${type} complete`);
    },
  });
};

export function Home() {
  return (
    <View className={styles.view}>
      <TopBar />
      <View
        className={styles.content}
        onClick={() => {
          const type = 'scope.userPreciseLocation';
          authorizeStatus({
            scope: type,
            success: e => {
              console.log(`authorizeStatus ${type} success`, e);
              getLocation(type);
            },
            fail: err => {
              console.log(`authorizeStatus ${type} fail`, err);
              // 检测权限状态关闭 申请权限
              getLocation(type);
            },
            complete: () => {
              console.log(`authorizeStatus ${type} complete`);
            },
          });
        }}
      >
        <View className={styles['space-between']} style={{ marginTop: '50rpx' }}>
          <Text>Public SDM Template</Text>
          <IconFont icon="sun" />
        </View>
      </View>
    </View>
  );
}

export default Home;