import type { GetStaticPropsContext } from 'next'
import useCustomer from '@framework/customer/use-customer'
import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
import { Container, Text, useUI } from '@components/ui'



export async function getStaticProps({
  preview,
  locale,
  locales,
}: GetStaticPropsContext) {
  const config = { locale, locales }
  const pagesPromise = commerce.getAllPages({ config, preview })
  const siteInfoPromise = commerce.getSiteInfo({ config, preview })
  const { pages } = await pagesPromise
  const { categories } = await siteInfoPromise

  return {
    props: { pages, categories },
  }
}

export default function Profile() {
  const { openModal, setModalView } = useUI()

  const { data } = useCustomer()

  const triggerChangePassword = () => {
    setModalView('CHANGE_PASSWORD')
    openModal()
  };

  return (
    <Container>
      <Text variant="pageHeading">My Profile</Text>
      {data && (
        <div className="grid lg:grid-cols-12">
          <div className="lg:col-span-8 pr-4">
            <div>
              <Text variant="sectionHeading">Full Name</Text>
              <span>
                {data.firstName} {data.lastName}
              </span>
            </div>
            <div className="mt-5">
              <Text variant="sectionHeading">Email</Text>
              <span>{data.email}</span>
            </div>

            <div className="mt-5">
              <Text variant="sectionHeading">Change Password</Text>
              <a
                className="text-accent-9 inline font-bold hover:underline cursor-pointer"
                onClick={triggerChangePassword}
              >Change Password</a>
            </div>
          </div>
        </div>
      )}
    </Container>
  )
}

Profile.Layout = Layout