import React from "react";
import {
  AppPages,
  Chat,
  FillTicket,
  HelpSupport,
  Location,
  LocationFill,
  PrivacyPolicIcon,
  ProfileSetting,
  PromoCode,
  Share,
  Wallet,
  WalletFill,
} from "@utils/icons";
import { useSelector } from "react-redux";
import { View } from "react-native";
import ReferralId from "@src/assets/icons/referralID";
import { appColors } from "@src/themes";
import { useValues } from "@src/utils/context";

export const useProfileData = (staffUnread = 0) => {
  const { translateData, taxidoSettingData } = useSelector(
    (state: any) => state.setting
  );
  const { isDark } = useValues();
  const ChatWithStaffIcon = (
    <View>
      <HelpSupport />
      {staffUnread > 0 && (
        <View
          style={{
            position: "absolute",
            top: -2,
            right: -2,
            width: 8,
            height: 8,
            borderRadius: 5,
            backgroundColor: "red",
          }}
        />
      )}
    </View>
  );
  return [
    {
      title: translateData.general,
      data: [
        {
          icon: (
            <WalletFill
              color={isDark ? appColors.whiteColor : appColors.blackColor}
            />
          ),
          title: translateData.myWallet,
          screenName: "Wallet",
        },
        {
          icon: (
            <LocationFill
              color={isDark ? appColors.whiteColor : appColors.blackColor}
            />
          ),
          title: translateData.savedLocation,
          screenName: "SavedLocation",
        },
        ...(taxidoSettingData?.cabbooking_values?.activation?.coupon_enable == 1
          ? [
              {
                icon: (
                  <FillTicket
                    color={isDark ? appColors.whiteColor : appColors.blackColor}
                  />
                ),
                title: translateData.promoCodeList,
                screenName: "PromoCodeScreen",
              },
            ]
          : []),
        {
          icon: <ReferralId />,
          title: "Referral ID",
          screenName: "ReferralID",
        },
      ],
    },
    {
      title: translateData.appDetails,
      data: [
        {
          icon: <AppPages />,
          title: translateData.appPages,
          screenName: "AppPageScreen",
        },
        {
          icon: <Share />,
          title: translateData.shareApp,
          screenName: "Share",
        },
        {
          icon: <Chat />,
          title: translateData.chatSupport,
          screenName: "SupportTicket",
        },
        {
          icon: ChatWithStaffIcon,
          title: translateData?.chatwithstaff,
          screenName: "ChatScreen",
        },
        {
          icon: <PrivacyPolicIcon />,
          title: translateData.privacyPolicy,
          screenName: "PrivacyPolicy",
        },
      ],
    },
  ];
};

export const useGuestData = () => {
  const { translateData } = useSelector((state: any) => state.setting);

  return [
    {
      title: translateData.appDetails,
      data: [
        {
          icon: <AppPages />,
          title: translateData.appPages,
          screenName: "AppPageScreen",
        },
        {
          icon: <Share />,
          title: translateData.shareApp,
          screenName: "Share",
        },
      ],
    },
  ];
};
