import * as React from "react";
import { memo } from "react";
import { View, SafeAreaView } from "react-native";
import Modal from "react-native-modal";
import CloseModalButton from "../close-modal-button";
import UserPicture from "./user-picture";
import { Tabs } from "../tabs";
import Info from "./info";
import EditProfile, { EditProfileProps } from "../edit-profile";
import { useSiteSettings } from "../../providers/site";
import useUserModal from "./hooks/use-user-modal";
import { useProfileProvider } from "../../providers/profile-provider";
import { useAuthProvider } from "../../providers/auth-provider";
export type userSectionType = "info" | "reward";

export type Props = {
  visible: boolean;
  onClose: () => void;
  name: string;
  imgUrl: string;
  sectionSelected: userSectionType;
  onManageMySubscription: () => void;
  onEditProfile: () => void;
  onLogout: () => void;
  onSelectSection: (id: userSectionType) => void;
  isEditingProfile: boolean;
  editProfileProps: EditProfileProps;
};

function UserModal({
  visible,
  onClose,
  name,
  imgUrl,
  onEditProfile,
  onLogout,
  onManageMySubscription,
  sectionSelected,
  onSelectSection,
  isEditingProfile,
  editProfileProps,
}: Props) {
  return (
    <Modal
      useNativeDriver
      animationIn="fadeInDown"
      animationInTiming={150}
      animationOut="fadeOutUp"
      animationOutTiming={150}
      style={{
        margin: 0,
      }}
      isVisible={visible}
    >
      <SafeAreaView style={{ height: "100%", backgroundColor: "white" }}>
        <CloseModalButton onPress={onClose} />
        {isEditingProfile ? (
          <EditProfile {...editProfileProps} />
        ) : (
          <View>
            <UserPicture imageUrl={imgUrl} name={name} />
            <Tabs
              activeTab={sectionSelected}
              onSetActiveTab={onSelectSection as (id: string) => void}
              items={[
                {
                  content: (
                    <Info
                      onEditProfile={onEditProfile}
                      onLogout={onLogout}
                      onManageMySubscription={onManageMySubscription}
                    />
                  ),
                  id: "info",
                  title: "Info",
                },
                { content: <View />, id: "reward", title: "Reward" },
              ]}
            />
          </View>
        )}
      </SafeAreaView>
    </Modal>
  );
}

type UserProps = {
  open: boolean;
  onClose: () => void;
};

export default memo(({ onClose, open }: UserProps) => {
  const { logout, auth } = useAuthProvider();
  const {
    settings: {
      user_profiles: { profile_images },
    },
  } = useSiteSettings();
  const { currentProfile } = useProfileProvider();
  const profileImages = profile_images.map(
    (profile_image: { url: string }) => ({
      imageUrl: "https://www.bowltv.com" + profile_image.url,
    })
  );

  const { userModal, open: openUserModal } = useUserModal(
    auth?.name || "",
    { imageUrl: currentProfile.icon },
    profileImages,
    () => {},
    logout,
    () => {}
  );
  return <UserModal {...userModal} visible={open} onClose={onClose} />;
});