import {Grid, ConfigProvider} from '@nutui/nutui-react-taro'
import navTo from "@/utils/common";
import Taro from '@tarojs/taro'
import {View, Button} from '@tarojs/components'
import {
  ShieldCheck,
  Location,
  Tips,
  Ask,
  // Dongdong,
  People,
  // AfterSaleService,
  Logout,
  Shop,
  Jdl,
  Service
} from '@nutui/icons-react-taro'
import {useUser} from "@/hooks/useUser";

const UserCell = () => {
  const {logoutUser, hasRole} = useUser();

  const onLogout = () => {
    Taro.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: function (res) {
        if (res.confirm) {
          // 使用 useUser hook 的 logoutUser 方法
          logoutUser();
          Taro.reLaunch({
            url: '/pages/index/index'
          })
        }
      }
    })
  }

  return (
    <>
      <View className="bg-white mx-4 mt-4 rounded-xl">
        <View className="font-semibold text-gray-800 pt-4 pl-4">我的服务</View>
        <ConfigProvider>
          <Grid
            columns={4}
            className="no-border-grid"
            style={{
              '--nutui-grid-border-color': 'transparent',
              '--nutui-grid-item-border-width': '0px',
              border: 'none'
            } as React.CSSProperties}
          >

            {hasRole('store') && (
              <Grid.Item text="门店中心" onClick={() => navTo('/store/index', true)}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <Shop color="#3b82f6" size="20"/>
                  </View>
                </View>
              </Grid.Item>
            )}

            {hasRole('rider') && (
              <Grid.Item text="配送中心" onClick={() => navTo('/rider/index', true)}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                   <Jdl color="#3b82f6" size="20"/>
                  </View>
                </View>
              </Grid.Item>
            )}

            {(hasRole('staff') || hasRole('admin')) && (
              <Grid.Item text="门店订单" onClick={() => navTo('/user/store/orders/index', true)}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <Shop color="#f59e0b" size="20"/>
                  </View>
                </View>
              </Grid.Item>
            )}

            <Grid.Item text="配送地址" onClick={() => navTo('/user/address/index', true)}>
              <View className="text-center">
                <View className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Location color="#3b82f6" size="20"/>
                </View>
              </View>
            </Grid.Item>

            <Grid.Item text={'常见问题'} onClick={() => navTo('/user/help/index')}>
              <View className="text-center">
                <View className="w-12 h-12 bg-cyan-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Ask className={'text-cyan-500'} size="20"/>
                </View>
              </View>
            </Grid.Item>

            {/* 修改联系我们为微信客服 */}
            <Grid.Item text="联系我们">
              <Button
                open-type="contact"
                className="w-full h-full flex flex-col items-center justify-center p-0 bg-transparent"
                hover-class="none"
                style={{border: 'none'}}
              >
                <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Service color="#67C23A" size="20"/>
                </View>
              </Button>
            </Grid.Item>

            <Grid.Item text={'实名认证'} onClick={() => navTo('/user/userVerify/index', true)}>
              <View className="text-center">
                <View className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <ShieldCheck color="#10b981" size="20"/>
                </View>
              </View>
            </Grid.Item>

            <Grid.Item text={'推广邀请'} onClick={() => navTo('/dealer/team/index', true)}>
              <View className="text-center">
                <View className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <People color="#8b5cf6" size="20"/>
                </View>
              </View>
            </Grid.Item>

            {/*<Grid.Item text={'我的邀请码'} onClick={() => navTo('/dealer/qrcode/index', true)}>*/}
            {/*  <View className="text-center">*/}
            {/*    <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
            {/*      <Dongdong color="#f59e0b" size="20"/>*/}
            {/*    </View>*/}
            {/*  </View>*/}
            {/*</Grid.Item>*/}

            {/*<Grid.Item text={'管理中心'} onClick={() => navTo('/admin/index', true)}>*/}
            {/*  <View className="text-center">*/}
            {/*    <View className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
            {/*      <AfterSaleService className={'text-red-500'} size="20"/>*/}
            {/*    </View>*/}
            {/*  </View>*/}
            {/*</Grid.Item>*/}


            <Grid.Item text={'关于我们'} onClick={() => navTo('/user/about/index')}>
              <View className="text-center">
                <View className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Tips className={'text-amber-500'} size="20"/>
                </View>
              </View>
            </Grid.Item>

            <Grid.Item text={'安全退出'} onClick={onLogout}>
              <View className="text-center">
                <View className="w-12 h-12 bg-pink-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                  <Logout className={'text-pink-500'} size="20"/>
                </View>
              </View>
            </Grid.Item>

          </Grid>
        </ConfigProvider>
      </View>
      {/*<View className="bg-white mx-4 mt-4 rounded-xl">*/}
      {/*  <View className="font-semibold text-gray-800 pt-4 pl-4">账号管理</View>*/}
      {/*  <ConfigProvider>*/}
      {/*    <Grid*/}
      {/*      columns={4}*/}
      {/*      className="no-border-grid"*/}
      {/*      style={{*/}
      {/*        '--nutui-grid-border-color': 'transparent',*/}
      {/*        '--nutui-grid-item-border-width': '0px',*/}
      {/*        border: 'none'*/}
      {/*      } as React.CSSProperties}*/}
      {/*    >*/}
      {/*      <Grid.Item text="账号安全" onClick={() => navTo('/user/profile/profile', true)}>*/}
      {/*        <View className="text-center">*/}
      {/*          <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
      {/*            <ShoppingAdd color="#3b82f6" size="20"/>*/}
      {/*          </View>*/}
      {/*        </View>*/}
      {/*      </Grid.Item>*/}

      {/*      <Grid.Item text="切换主题" onClick={() => navTo('/user/theme/index', true)}>*/}
      {/*        <View className="text-center">*/}
      {/*          <View className="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
      {/*            <Location color="#3b82f6" size="20"/>*/}
      {/*          </View>*/}
      {/*        </View>*/}
      {/*      </Grid.Item>*/}

      {/*      <Grid.Item text={'关于我们'} onClick={() => navTo('/user/about/index')}>*/}
      {/*        <View className="text-center">*/}
      {/*          <View className="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
      {/*            <Tips className={'text-amber-500'} size="20"/>*/}
      {/*          </View>*/}
      {/*        </View>*/}
      {/*      </Grid.Item>*/}

      {/*      <Grid.Item text={'安全退出'} onClick={onLogout}>*/}
      {/*        <View className="text-center">*/}
      {/*          <View className="w-12 h-12 bg-pink-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
      {/*            <Logout className={'text-pink-500'} size="20"/>*/}
      {/*          </View>*/}
      {/*        </View>*/}
      {/*      </Grid.Item>*/}

      {/*    </Grid>*/}
      {/*  </ConfigProvider>*/}
      {/*</View>*/}
    </>
  )
}
export default UserCell