import { RouteProp, useRoute } from '@react-navigation/native';
import AppText from 'components/AppText';
import LayoutTwo from 'components/LayoutTwo';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { PaymentStyle } from '../../payment/ui/style';
import ModalCard from './ModalCard';
import ModalPay from './ModalPay';
import ModalSuccess from './ModalSuccess';
import PaymentProduct from './PaymentProduct';

const PaymentMethod = () => {
  const route = useRoute<RouteProp<any, 'PaymentMethod'>>();
  const packets = route.params?.packets;
  const { bottom } = useSafeAreaInsets();
  const [isModalVisible, setModalVisible] = React.useState(false);
  const { t } = useTranslation();
  const [selectedId, setSelectedId] = React.useState<'card' | 'pay' | null>(
    null,
  );
  const [selectedCard, setSelectedCard] = React.useState<
    'click' | 'payme' | null
  >(null);
  const [cardModal, setCardModal] = React.useState(false);
  const [payModal, setPayModal] = React.useState(false);
  const [success, setSuccess] = React.useState(false);

  const toggleModal = () => setModalVisible(true);
  console.log(packets);

  React.useEffect(() => {
    if (payModal) {
      const timeout = setTimeout(() => setSuccess(true), 1000);
      return () => clearTimeout(timeout);
    }
  }, [payModal]);

  return (
    <LayoutTwo title={t("To'lov usuli")}>
      <PaymentProduct packet={packets!} />
      <ModalPay
        paymentType={packets.paymentType}
        packId={packets.id}
        paymentStatus={packets.paymentStatus}
        isModalVisible={isModalVisible}
        selectedId={selectedId}
        setModalVisible={setModalVisible}
        setSelectedId={setSelectedId}
        cardModal={cardModal}
        setCardModal={setCardModal}
        payModal={payModal}
        setPayModal={setPayModal}
        success={success}
        setSuccess={setSuccess}
      />
      {cardModal && (
        <ModalCard
          isVisible={cardModal}
          packId={packets.id}
          setIsVisible={setCardModal}
          selectedId={selectedCard}
          setSelectedId={setSelectedCard}
        />
      )}
      {success && (
        <ModalSuccess
          visible={success}
          setVisible={setSuccess}
          setPayModal={setPayModal}
        />
      )}
      <TouchableOpacity
        style={[PaymentStyle.button, { bottom: bottom + 80 }]}
        onPress={toggleModal}
      >
        <AppText style={PaymentStyle.btnText}>{t("To'lash")}</AppText>
      </TouchableOpacity>
    </LayoutTwo>
  );
};

export default PaymentMethod;
