import { type FC } from 'react'
import { TickCircle } from 'iconsax-react'
import Button from '@/components/Button'
import { useCreateOrderForm } from './hooks/useCreateOrderForm'
import CreateOrderCustomerSection from './components/CreateOrderCustomerSection'
import CreateOrderItemsSection from './components/CreateOrderItemsSection'
import CreateOrderDeliverySection from './components/CreateOrderDeliverySection'
import CreateOrderSidebar from './components/CreateOrderSidebar'

const CreateOrder: FC = () => {
    const {
        formik,
        foods,
        deliveryMethods,
        cashPaymentMethod,
        selectedDeliveryMethod,
        selectedPaymentMethod,
        isCourierDelivery,
        isCarDelivery,
        isDineIn,
        orderSummary,
        addFoodToOrder,
        updateItemQuantity,
        removeItem,
        isSubmitting,
        customerAddresses,
        selectedAddressId,
        handleUserFound,
        handleUserNotFound,
        clearCustomerData,
        applySavedAddress,
        selectManualAddress,
        handleAddressFieldChange,
        handleLocationSelect,
    } = useCreateOrderForm()

    return (
        <div className='mt-5'>
            <div className='flex justify-between items-center'>
                <h1 className='text-lg font-light'>ثبت سفارش جدید</h1>
                <Button
                    className='w-fit px-6'
                    isloading={isSubmitting}
                    onClick={() => formik.handleSubmit()}
                >
                    <div className='flex gap-2 items-center'>
                        <TickCircle size={20} color='#fff' />
                        <span>ثبت سفارش</span>
                    </div>
                </Button>
            </div>

            <div className='flex flex-col xl:flex-row gap-7 mt-9'>
                <div className='flex-1 min-w-0 flex flex-col gap-8'>
                    <CreateOrderCustomerSection
                        formik={formik}
                        onUserFound={handleUserFound}
                        onUserNotFound={handleUserNotFound}
                        onClearCustomerData={clearCustomerData}
                    />

                    <CreateOrderItemsSection
                        formik={formik}
                        foods={foods}
                        onAddFood={addFoodToOrder}
                        onUpdateQuantity={updateItemQuantity}
                        onRemoveItem={removeItem}
                    />

                    <CreateOrderDeliverySection
                        formik={formik}
                        deliveryMethods={deliveryMethods}
                        cashPaymentMethod={cashPaymentMethod}
                        isCourierDelivery={isCourierDelivery}
                        isCarDelivery={isCarDelivery}
                        isDineIn={isDineIn}
                        customerAddresses={customerAddresses}
                        selectedAddressId={selectedAddressId}
                        onSelectSavedAddress={applySavedAddress}
                        onSelectManualAddress={selectManualAddress}
                        onAddressFieldChange={handleAddressFieldChange}
                        onLocationSelect={handleLocationSelect}
                    />
                </div>

                <div className='w-full xl:w-[330px] flex-shrink-0 xl:sticky xl:top-4 xl:self-start'>
                    <CreateOrderSidebar
                        formik={formik}
                        orderSummary={orderSummary}
                        selectedDeliveryMethod={selectedDeliveryMethod}
                        selectedPaymentMethod={selectedPaymentMethod}
                    />
                </div>
            </div>
        </div>
    )
}

export default CreateOrder