import { Basket } from '@/components/orders/Basket'
import { TenantForm } from '@/components/orders/TenantForm'
import { APP_NAME } from '@/constants/app.constant'
import { CustomTenantDto } from '@/proxy/config/models'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useStoreActions, useStoreState } from '@/store/store'
import {
  BasketData,
  clearBasket,
  removeItemFromBasket,
  updateBasketItemQuantity,
} from '@/utils/basketUtils'
import { useLocalization } from '@/utils/hooks/useLocalization'
import React, { useState, useEffect } from 'react'
import { Helmet } from 'react-helmet'
import { useNavigate } from 'react-router-dom'

const Checkout: React.FC = () => {
  const navigate = useNavigate()
  const [isBasketOpen, setIsBasketOpen] = useState(false)
  const { translate } = useLocalization()

  const storedBasketData = useStoreState((state) => state.client.basketData)
  const { setBasketData } = useStoreActions((actions) => actions.client)
  const { setTenantData } = useStoreActions((actions) => actions.client.order)
  const [basketData, setLocalBasketData] = useState<BasketData>(storedBasketData)

  useEffect(() => {
    setBasketData(basketData)
  }, [basketData, setBasketData])

  const handleTenantSubmit = (tenantData: CustomTenantDto) => {
    setTenantData(tenantData)
    navigate(ROUTES_ENUM.public.payment)
  }

  const handleBackToCatalog = () => {
    navigate(ROUTES_ENUM.public.home)
  }

  const handleCheckout = () => {
    setIsBasketOpen(false)
    navigate(ROUTES_ENUM.public.checkout)
  }

  const handleUpdateQuantity = (id: string, quantity: number) => {
    setLocalBasketData((currentState) => updateBasketItemQuantity(currentState, id, quantity))
  }

  const handleRemoveItem = (id: string) => {
    setLocalBasketData((currentState) => removeItemFromBasket(currentState, id))
  }

  const handleClearBasket = () => {
    setLocalBasketData(clearBasket())
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      <Helmet
        titleTemplate={`%s | ${APP_NAME}`}
        title={translate('::' + 'Public.nav.checkout')}
        defaultTitle={APP_NAME}
      ></Helmet>

      {/* Hero Section */}
      <div className="relative bg-blue-900 text-white py-12">
        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        ></div>
      </div>

      <div className="container mx-auto px-4 pt-12">
        <TenantForm onSubmit={handleTenantSubmit} onBack={handleBackToCatalog} />

        <Basket
          isOpen={isBasketOpen}
          onClose={() => setIsBasketOpen(false)}
          onCheckout={handleCheckout}
          basketData={basketData}
          updateQuantity={handleUpdateQuantity}
          removeItem={handleRemoveItem}
          clearBasket={handleClearBasket}
        />
      </div>
    </div>
  )
}

export default Checkout