import React, { useState } from "react"
import { View } from "react-native"
import { Landmark } from "../../hooks/useLandmarks"
import { UserProfile } from "../../hooks/useProfile"
import { RegisterCredsValues } from "../../utils/RegistrationUtils"
import { ProfileInformation } from "./ProfileSections/ProfileInformation"
import { ProfileLegal } from "./ProfileSections/ProfileLegal"
import { ProfilePrefs } from "./ProfileSections/ProfilePrefs"
import { ProfileSkills } from "./ProfileSections/ProfileSkills"
import { ProfileSubscription } from "./ProfileSections/ProfileSubscription"

interface ProfileSectionsProps {
    profile: UserProfile, 
    toggleTipsAsync: () => void, 
    changePassword: (password: string) => void, 
    changePasswordStatus: string, 
    resetChangePassword: () => void
    changeInfo: (info: RegisterCredsValues) => void
    changeInfoStatus: string
    resetChangeInfo: () => void
}

export const ProfileSections: React.FC<ProfileSectionsProps> = ({profile, toggleTipsAsync, changePassword, changePasswordStatus, resetChangePassword, changeInfo, changeInfoStatus, resetChangeInfo}) => {
    const [infoCollapsed, toggleInfo] = useState<boolean>(true)
    const [skillsCollapsed, toggleSkills] = useState<boolean>(true)
    const [prefsCollapsed, togglePrefs] = useState<boolean>(true)
    const [subscriptionCollapsed, toggleSubscription] = useState<boolean>(true)
    const [legalCollapsed, toggleLegal] = useState<boolean>(true)

    const openInfo = () => {
        toggleInfo(!infoCollapsed)
        if (!skillsCollapsed) toggleSkills(true)
        if (!prefsCollapsed) togglePrefs(true)
        if (!subscriptionCollapsed) toggleSubscription(!subscriptionCollapsed)
        if (!legalCollapsed) toggleLegal(true)
    }

    const openSkills = () => {
        toggleSkills(!skillsCollapsed)
        if (!infoCollapsed) toggleInfo(true)
        if (!prefsCollapsed) togglePrefs(true)
        if (!subscriptionCollapsed) toggleSubscription(!subscriptionCollapsed)
        if (!legalCollapsed) toggleLegal(true)
    }

    const openPrefs = () => {
        togglePrefs(!prefsCollapsed)
        if (!infoCollapsed) toggleInfo(true)
        if (!skillsCollapsed) toggleSkills(true)
        if (!subscriptionCollapsed) toggleSubscription(!subscriptionCollapsed)
        if (!legalCollapsed) toggleLegal(true)
    }

    const openSubscription = () => {
        toggleSubscription(!subscriptionCollapsed)
        if (!infoCollapsed) toggleInfo(true)
        if (!skillsCollapsed) toggleSkills(true)
        if (!prefsCollapsed) togglePrefs(true)
        if (!legalCollapsed) toggleLegal(true)
    }

    const openLegal = () => {
        toggleLegal(!legalCollapsed)
        if (!infoCollapsed) toggleInfo(true)
        if (!subscriptionCollapsed) toggleSubscription(true)
        if (!skillsCollapsed) toggleSkills(true)
        if (!prefsCollapsed) togglePrefs(true)
    }

    return (
        <View>
            <ProfileInformation changeInfo={changeInfo} changeInfoStatus={changeInfoStatus} resetChangeInfo={resetChangeInfo} resetChangePassword={resetChangePassword} changePasswordStatus={changePasswordStatus} changePassword={changePassword} openInfo={openInfo} infoCollapsed={infoCollapsed} email={profile?.email} username={profile?.username} />
            {/* <ProfileSkills openSkills={openSkills} skillsCollapsed={skillsCollapsed} /> */}
            <ProfilePrefs openPrefs={openPrefs} showTips={profile?.show_tips} prefsCollapsed={prefsCollapsed} toggleTipsAsync={toggleTipsAsync} />
            <ProfileSubscription openSubscription={openSubscription} subscriptionCollapsed={subscriptionCollapsed} />
            <ProfileLegal openLegal={openLegal} legalCollapsed={legalCollapsed} />
        </View>
    )
}