Untitled

import React, {useEffect} from 'react';
import {Linking, NativeModules, View} from 'react-native';
import {CommonText} from 'components/commons/CommonText';
import useTheme from 'src/themes/useTheme';
import {
  IcCircleWarning,
  IcCoin,
  IcGem,
  IcGift,
  IcMenu,
  IcTrima,
} from 'src/assets/icons';
import {CommonButton} from './CommonButton';
import {CommonSpacing} from './CommonSpacing';
import {ScaledSheet} from 'react-native-size-matters';
import ModalController from '../modals/ModalController';
import {LinkToTrimaModal2} from 'src/futures/questList/components/LinkToTrimaModal2';
import {
  CLICK_EXCHANGE_BUTTON,
  CLICK_MILE_BUTTON,
  CLICK_OPEN_MENU,
  TRIMA_APP_STORE,
} from 'src/constants/constants';
import {useIsTrimaInstalled} from 'src/hooks/useIsTrimaInstalled';
import {
  useLazyGetTrimaDeeplinkQuery,
  useSkipQuestDemoMutation,
} from 'src/futures/auth/authService';
import {useSelector} from 'react-redux';
import {
  selectIsLoggedInUsingTrima,
  selectIsShowMileCheckModal,
  selectIsShowTradeMileModal,
  selectIsSkipQuestDemo,
} from 'src/futures/auth/authSlice';
import {useAppSelector} from 'src/app/hooks';
import {GoToTrimaModal} from 'src/futures/questList/components/GoToTrimaModal';
import {LinkToTrimaModal} from 'src/futures/questList/components/LinkToTrimaModal';
import {ColorProps} from 'src/themes/ThemeProvider';
import {mainRoutes} from 'src/navigation/mainRoutes';
import {navigateAndSimpleReset} from 'src/utils/navigation';
import {ShadowedView, shadowStyle} from 'react-native-fast-shadow';
import {getThoundsandSeparatedNumber} from 'src/utils/myUtils';
import {PostStatisticModel} from 'src/app/models/postStatistic.model';
import {selectPostStatistic} from 'src/futures/questList/postStatisticsSlice';
import {useViewNewMileMutation} from 'src/futures/questList/postStatisticsService';
import EventCardComponent from 'src/futures/questList/components/EventCardConponent';
import {selectOngoingEvent} from 'src/futures/questList/onGoingEventSlice';
import {useNavigation} from '@react-navigation/native';
const {Repro} = NativeModules;

type HeaderTopAppProps = {
  isFromDemo: boolean;
  isCompletedQuestDemo: boolean;
};

export const HeaderTopApp = ({
  isFromDemo,
  isCompletedQuestDemo,
}: HeaderTopAppProps) => {
  const theme = useTheme();
  const styles = createStyles(theme.colors);
  const isShowDemo = isFromDemo && !isCompletedQuestDemo;
  const isTrimaInstalled = useIsTrimaInstalled();
  const isShowTradeMileModal = useSelector(selectIsShowTradeMileModal);
  const isLoggedInTrima = useAppSelector(selectIsLoggedInUsingTrima); //TODO: get data from authen later
  const isSkipQuestDemo = useSelector(selectIsSkipQuestDemo);
  const postStatistic: PostStatisticModel = useAppSelector(selectPostStatistic);
  const [viewNewMileMutation] = useViewNewMileMutation();
  const isShowMileCheckModal = useSelector(selectIsShowMileCheckModal);
  const onGoingEventData = useAppSelector(selectOngoingEvent);

  const navigation = useNavigation();
  const [
    getTrimaDeeplink,
    {isFetching: isLoadingGetTrimaLink, error: errorGetTrimaLink},
  ] = useLazyGetTrimaDeeplinkQuery();

  const [skipQuestDemo, {isLoading: isSkipLoading}] =
    useSkipQuestDemoMutation();

  useEffect(() => {
    if (errorGetTrimaLink) {
      ModalController.showModalError({
        icon: <IcCircleWarning />,
        error: errorGetTrimaLink,
      });
    } else {
      ModalController.hideModalError();
    }
  }, [errorGetTrimaLink]);

  useEffect(() => {
    if (isLoadingGetTrimaLink) {
      ModalController.showModalLoading();
    } else {
      ModalController.hideModalLoading();
    }
  }, [isLoadingGetTrimaLink]);

  useEffect(() => {
    if (isSkipLoading) {
      ModalController.showModalLoading();
    } else {
      ModalController.hideModalLoading();
    }
  }, [isSkipLoading]);

  const openTrimaApp = (url: string) => {
    Linking.openURL(url).catch(() => {
      Linking.openURL(TRIMA_APP_STORE ?? '');
    });
  };

  const onLinkTrima = async () => {
    try {
      ModalController.hideCustomModal();
      const trimaLink = await getTrimaDeeplink('link_account_trima').unwrap();
      openTrimaApp(trimaLink.url);
    } catch (e) {}
  };

  const onLinkTrimaButtonClick = async () => {
    try {
      ModalController.hideCustomModal();
      ModalController.showCustomModal(
        <LinkToTrimaModal2
          onCloseModal={() => ModalController.hideCustomModal()}
          onLinkTrima={async () => {
            ModalController.hideCustomModal();
            if (!isTrimaInstalled) {
              ModalController.showWarningModal({
                customContent: (
                  <>
                    <CommonText color={theme.colors.dark3} weight="semibold">
                      {
                        'トリマがインストールされていないため、連携できませんでした。\nトリマをインストール&ログインしてから、再度お試しください。\nトリマのインストールは'
                      }
                      <CommonText
                        children={'こちら'}
                        color={theme.colors.text.link}
                        onPress={() => Linking.openURL(TRIMA_APP_STORE!)}
                      />
                    </CommonText>
                  </>
                ),
              });
            } else {
              onLinkTrima();
            }
          }}
        />,
      );
    } catch (e) {}
  };

  const checkIsLoggedInTrima = () => {
    ModalController.showCustomModal(
      <LinkToTrimaModal
        content="ゲストアカウントではマイルの獲得や交換ができません。"
        highlightContent={
          '以下からジオクエアカウントが作成できます。\n※アカウント作成にはポイ活アプリ「トリマ」アカウントが必要です。「トリマ」をインストールしていない場合、アプリストアに遷移します。'
        }
        isHighLightTitle={false}
        onCloseModal={() => {
          ModalController.hideCustomModal();
        }}
        onLinkTrima={onLinkTrima}
      />,
    );
  };

  const goToTradeMile = () => {
    if (!isLoggedInTrima) {
      checkIsLoggedInTrima();
      return;
    }
    ModalController.showCustomModal(
      <GoToTrimaModal
        title="マイル交換"
        content="マイル交換のため「トリマ」を開きます。"
        type="tradeMile"
        onCloseModal={() => ModalController.hideCustomModal()}
      />,
    );
  };

  const onSkipDemo = () => {
    if (isSkipQuestDemo) {
      navigateAndSimpleReset(mainRoutes.QuestListStackScreen);
    } else {
      skipQuestDemo()
        .unwrap()
        .then(_ => {
          navigateAndSimpleReset(mainRoutes.QuestListStackScreen);
        });
    }
  };

  const handleTradeButtonClick = () => {
    Repro.track(CLICK_EXCHANGE_BUTTON, {});
    if (isShowTradeMileModal || !isLoggedInTrima) {
      goToTradeMile();
    } else {
      Linking.openURL('tripmile://mileuse').catch(() => {
        Linking.openURL(TRIMA_APP_STORE ?? '');
      });
    }
  };

  const onConfirmSkipDemo = () => {
    ModalController.showConfirmModal({
      title: 'スキップ確認',
      content: 'チュートリアルをスキップしてよろしいですか？',
      leftButtonText: 'キャンセル',
      rightButtonText: 'スキップする',
      onRightButtonClick: () => {
        onSkipDemo();
        ModalController.hideConfirmModal();
      },
    });
  };

  const goToMileCheck = () => {
    if (!isLoggedInTrima) {
      checkIsLoggedInTrima();
      return;
    }
    ModalController.showCustomModal(
      <GoToTrimaModal
        title="マイル履歴確認"
        content="マイル履歴確認のため「トリマ」を開きます。"
        type="mileCheck"
        onCloseModal={() => ModalController.hideCustomModal()}
      />,
    );
  };

  const handleTrimaButtonClick = () => {
    Repro.track(CLICK_MILE_BUTTON, {});
    if (isShowMileCheckModal || !isLoggedInTrima) {
      goToMileCheck();
    } else {
      Linking.openURL('tripmile://milehistory').catch(() => {
        Linking.openURL(TRIMA_APP_STORE ?? '');
      });
    }
  };

  const onTrimaButton = () => {
    if (!postStatistic.has_view_new_mile) {
      viewNewMileMutation();
    }
    handleTrimaButtonClick();
  };

  return (
    <View style={{backgroundColor: theme.colors.gray2}}>
      <View style={styles.headerTopAppContainer}>
        <View style={[styles.row, styles.gap8]}>
          {isLoggedInTrima ? (
            <>
              <ShadowedView
                style={shadowStyle({
                  color: theme.colors.backgroundReverse,
                  opacity: 0.25,
                  radius: 8,
                  offset: [0, 0],
                })}>
                <View style={[styles.borderBottom2]}>
                  <CommonButton
                    onPress={onTrimaButton}
                    style={styles.paddingHorizontal}>
                    <IcGem />
                    <CommonSpacing width={4} />
                    <CommonText
                      variant={
                        postStatistic.total_mile > 999999999
                          ? 'body_xxxs_small'
                          : postStatistic.total_mile > 999999
                            ? 'body_xxx_small'
                            : undefined
                      }
                      color={theme.colors.text.reverse}
                      weight="bold">
                      {getThoundsandSeparatedNumber(postStatistic.total_mile)}
                    </CommonText>
                    <CommonText
                      weight={'regular'}
                      variant="body_xxx_small"
                      color={theme.colors.text.reverse}>
                      マイル
                    </CommonText>
                  </CommonButton>
                  {!postStatistic.has_view_new_mile && (
                    <View style={styles.badge} />
                  )}
                </View>
              </ShadowedView>
              <ShadowedView
                style={shadowStyle({
                  color: theme.colors.backgroundReverse,
                  opacity: 0.25,
                  radius: 8,
                  offset: [0, 0],
                })}>
                <View style={styles.borderBottom}>
                  <CommonButton
                    variant="body_xxx_small"
                    title="交換"
                    weight="bold"
                    onPress={handleTradeButtonClick}
                    style={styles.btnExchange}
                    backgroundColor={theme.colors.background}
                    textColor={theme.colors.dark1}
                  />
                </View>
              </ShadowedView>
              {/* <ShadowedView
                style={shadowStyle({
                  color: theme.colors.backgroundReverse,
                  opacity: 0.25,
                  radius: 8,
                  offset: [0, 0],
                })}>
                <View style={styles.borderBottom}>
                  <CommonButton
                    title="ボーナス"
                    weight="bold"
                    variant="body_xxx_small"
                    style={styles.btnBonus}
                    backgroundColor={theme.colors.background}
                    leftIcon={<IcGift />}
                    textColor={theme.colors.dark1}
                  />
                </View>
              </ShadowedView>
              <View style={styles.coin}>
                <IcCoin />
                <CommonText
                  children="500"
                  color={theme.colors.dark1}
                  variant="body_x_small"
                />
              </View> */}
            </>
          ) : (
            <>
              <ShadowedView
                style={shadowStyle({
                  color: theme.colors.backgroundReverse,
                  opacity: 0.25,
                  radius: 8,
                  offset: [0, 0],
                })}>
                <View style={styles.borderBottom2}>
                  <CommonButton
                    onPress={onLinkTrimaButtonClick}
                    style={styles.linkTrimaButton}>
                    <IcTrima width={16} height={16} />
                    <CommonSpacing width={4} />
                    <CommonText
                      color={theme.colors.text.reverse}
                      variant="body_xxx_small"
                      weight="bold">
                      {'トリマ未連携'}
                    </CommonText>
                  </CommonButton>
                </View>
              </ShadowedView>
              {/* <ShadowedView
                style={shadowStyle({
                  color: theme.colors.backgroundReverse,
                  opacity: 0.25,
                  radius: 8,
                  offset: [0, 0],
                })}>
                <View style={styles.borderBottom}>
                  <CommonButton
                    title="ボーナス"
                    weight="bold"
                    style={styles.btnBonus}
                    backgroundColor={theme.colors.background}
                    leftIcon={<IcGift />}
                    textColor={theme.colors.dark1}
                  />
                </View>
              </ShadowedView> */}
            </>
          )}
        </View>
        {!isShowDemo && (
          <ShadowedView
            style={shadowStyle({
              color: theme.colors.backgroundReverse,
              opacity: 0.15,
              radius: 8,
              offset: [0, 0],
            })}>
            <View style={styles.borderMenu}>
              <CommonButton
                activeOpacity={0.9}
                style={styles.drawerMenu}
                backgroundColor={theme.colors.gray2}
                onPress={() => {
                  if (!isShowDemo) {
                    Repro.track(CLICK_OPEN_MENU, {});
                    navigation.openDrawer();
                  } else {
                    onConfirmSkipDemo();
                  }
                }}>
                {isShowDemo ? (
                  <CommonText
                    children={'スキップ'}
                    color={theme.colors.dark1}
                    weight="bold"
                    style={styles.skipDemoButton}
                  />
                ) : (
                  <IcMenu />
                )}
              </CommonButton>
            </View>
          </ShadowedView>
        )}
      </View>
      {!isFromDemo &&
        onGoingEventData &&
        Object.keys(onGoingEventData).length > 0 && (
          <View style={styles.wrapEvent}>
            <EventCardComponent eventListData={onGoingEventData!} />
            <CommonSpacing height={8} />
          </View>
        )}
    </View>
  );
};

const createStyles = (colors: ColorProps) =>
  ScaledSheet.create({
    row: {
      flexDirection: 'row',
    },
    headerTopAppContainer: {
      paddingHorizontal: '8@ms',
      justifyContent: 'space-between',
      flexDirection: 'row',
      marginBottom: 14,
    },
    linkTrimaAndMileTradeButtonContainer: {
      flexDirection: 'row',
    },
    linkTrimaButton: {
      paddingHorizontal: '12@ms',
      height: 'auto',
      paddingVertical: '10@ms',
      backgroundColor: '#F5C344',
    },
    mileTradeButton: {
      paddingHorizontal: '8@ms',
    },
    skipDemoButton: {
      textDecorationLine: 'underline',
      color: colors.dark1,
    },
    drawerMenu: {
      paddingHorizontal: '8@ms',
      paddingVertical: '6@ms',
      height: 'auto',
    },
    badge: {
      borderRadius: '12@ms',
      width: '12@ms',
      height: '12@ms',
      position: 'absolute',
      top: '-4@ms',
      right: '-3@ms',
      backgroundColor: colors.error.secondary,
    },
    additionalOrderButtonContainer: {
      alignItems: 'flex-end',
      marginBottom: '16@ms',
    },
    additionalOrderButton: {
      paddingHorizontal: '12@ms',
      paddingVertical: '8@ms',
      borderRadius: '19@ms',
    },
    orderButtionFiltered: {
      borderColor: colors.primary,
    },
    orderIcon: {
      marginLeft: '4@ms',
    },
    paddingHorizontal: {
      padding: '8@ms',
      height: 'auto',
    },
    btnExchange: {
      padding: '10@ms',
      height: 'auto',
    },
    btnBonus: {
      paddingHorizontal: '4@ms',
      paddingVertical: '10@ms',
      height: 'auto',
    },
    coin: {
      backgroundColor: colors.background,
      borderRadius: '4@ms',
      alignItems: 'center',
      flexDirection: 'row',
      gap: '4@ms',
      paddingHorizontal: '6@ms',
      paddingVertical: '8@ms',
    },
    wrapEvent: {
      minHeight: '101@ms',
      paddingHorizontal: '16@ms',
    },
    gap8: {
      gap: '8@ms',
    },
    borderBottom: {
      paddingBottom: '3@ms',
      backgroundColor: colors.dark3,
      borderRadius: '4@ms',
      padding: '1@ms',
    },
    borderBottom2: {
      paddingBottom: '3@ms',
      backgroundColor: colors.dark1,
      borderRadius: '4@ms',
    },
    borderMenu: {
      alignSelf: 'flex-start',
      padding: '1@ms',
      borderRadius: '4@ms',
      paddingBottom: '3@ms',
      backgroundColor: colors.support1,
    },
  });