import Link from '@/core/components/elements/Link/Link'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import useAuth from '@/core/hooks/useAuth'
import { getItemAddress, updateItemAddress } from '@/core/utils/address'
import { useRouter } from 'next/router'
import useAddresses from '../hooks/useAddresses'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import Menu from '@/lib/auth/components/Menu'

const Addresses = () => {
  const router = useRouter()
  const { select = null } = router.query
  const { addresses } = useAddresses()
  const selectedAddress = getItemAddress(select || '')
  const changeSelectedAddress = (id) => {
    if (!select) return
    updateItemAddress(select, id)
    router.back()
  }

  if (addresses.isLoading) {
    return (
      <div className='flex justify-center my-6'>
        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
      </div>
    )
  }

  return (
    <>
      <MobileView>
        <div className='p-4'>
          <div className='text-right'>
            <Link href='/my/address/create'>Tambah Alamat</Link>
          </div>

          <div className='grid gap-y-4 mt-4'>
            {addresses.data?.map((address, index) => {
              const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
              return (
                <AddressCard
                  key={index}
                  address={address}
                  type={type}
                  changeSelectedAddress={changeSelectedAddress}
                  selectedAddress={selectedAddress}
                  select={select}
                />
              )
            })}
          </div>
        </div>
      </MobileView>

      <DesktopView>
        <div className='container mx-auto flex py-10'>
          <div className='w-3/12 pr-4'>
            <Menu />
          </div>
          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
            <div className='flex items-center mb-6'>
              <h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
              <Link
                href='/my/address/create'
                className='btn-solid-red py-2 px-3 !text-gray_r-1 h-fit ml-auto'
              >
                Tambah Alamat
              </Link>
            </div>

            <div className='grid grid-cols-2 gap-4'>
              {addresses.data?.map((address, index) => {
                const type =
                  address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
                return (
                  <AddressCard
                    key={index}
                    address={address}
                    type={type}
                    changeSelectedAddress={changeSelectedAddress}
                    selectedAddress={selectedAddress}
                    select={select}
                  />
                )
              })}
            </div>
          </div>
        </div>
      </DesktopView>
    </>
  )
}

const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
  const auth = useAuth()

  return (
    <div
      className={`p-4 rounded-md border 
        ${
          (selectedAddress && selectedAddress == address.id
            ? 'border-gray_r-7 bg-gray_r-4'
            : 'border-gray_r-7') +
          ' ' +
          (select && 'cursor-pointer hover:bg-gray_r-4 transition')
        }`}
    >
      <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
        <div className='flex gap-x-2'>
          <div className='badge-red'>{type}</div>
          {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
        </div>
        <p className='font-medium mt-2'>{address.name}</p>
        {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
        <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
      </div>
      <Link
        href={`/my/address/${address.id}/edit`}
        className='btn-light bg-white mt-3 w-full !text-gray_r-11'
      >
        Ubah Alamat
      </Link>
    </div>
  )
}

export default Addresses