/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * Written and maintained by the Click & Push Development team 
 * <dev@clicknpush.ca>, January 2022
 */

import * as Linking from 'expo-linking'
import React, { useState } from "react"
import { View } from "react-native"
import { UserProfile } from "../../state/external/profiles"
import { RegisterCredsValues } from "../../utils/RegistrationUtils"
import { ProfileAbout } from './ProfileSections/ProfileAbout'
import { ProfileInformation } from "./ProfileSections/ProfileInformation"
import { ProfileLegal } from "./ProfileSections/ProfileLegal"
import { ProfilePrefs } from "./ProfileSections/ProfilePrefs"
import { ProfileSectionHeader } from "./ProfileSections/ProfileSectionHeader"
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
    deleteAccount: () => void
    deleteAccountStatus: string
}

type SectionName = "information" | "legal" | "prefs" | "subscription" | "skills" | "about" | 'none'

interface SectionsCollapseState {
    info: boolean,
    prefs: boolean,
    legal: boolean,
    subscription: boolean,
    skills: boolean,
    about: boolean
}

export const ProfileSections: React.FC<ProfileSectionsProps> = ({
    profile, 
    toggleTipsAsync, 
    changePassword, 
    changePasswordStatus, 
    resetChangePassword, 
    changeInfo, 
    changeInfoStatus, 
    resetChangeInfo,
    deleteAccount,
    deleteAccountStatus
}) => {
    const [collapsed, setCollapsed] = useState<SectionsCollapseState>({info: true, prefs: true, legal: true, subscription: true, skills: true, about: true})
    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 toggleSection = (section: SectionName) => {
        Object.keys(collapsed).forEach(key => {
            if (key === section) {
                setCollapsed({...collapsed, [key]: !collapsed[key]})
            }
            else {
                setCollapsed({...collapsed, [key]: true})
            }
        })
    }
    const openFeedback = () => {
        toggleSection('none')
        Linking.openURL('mailto:dev@clicknpush.ca')
    }

    return (
        <View>
            <ProfileInformation 
                changeInfo={changeInfo} 
                changeInfoStatus={changeInfoStatus} 
                deleteAccount={deleteAccount}
                deleteAccountStatus={deleteAccountStatus}
                resetChangeInfo={resetChangeInfo} 
                resetChangePassword={resetChangePassword} 
                changePasswordStatus={changePasswordStatus} 
                changePassword={changePassword} 
                openInfo={() => toggleSection('information')} 
                infoCollapsed={infoCollapsed} 
                email={profile?.email} 
                username={profile?.username} />
            {/* <ProfileSkills openSkills={openSkills} skillsCollapsed={skillsCollapsed} /> */}
            <ProfilePrefs openPrefs={() => toggleSection('prefs')} showTips={profile?.show_tips} prefsCollapsed={collapsed.prefs} toggleTipsAsync={toggleTipsAsync} />
            <ProfileSubscription openSubscription={() => toggleSection('subscription')} subscriptionCollapsed={collapsed.subscription} />
            <ProfileLegal openLegal={() => toggleSection('legal')} legalCollapsed={collapsed.legal} />
            <ProfileSectionHeader isCollapsed={true} collapseToggleMethod={openFeedback} title="Provide feedback"/>
        </View>
    )
}