'use client'
import React, { useState } from 'react'
import { Button } from '@/components/ui/button'
import TrackCode from './TrackCode'
import { Payment, User, ShipmentAddress } from '../../types/Types'
import * as api from '../../service/Service'
import { toast } from '@/components/Toast'

interface OrderSidebarProps {
    orderData: {
        payment: Payment
        order: {
            _id: string
            user: User
            shipmentAddress: ShipmentAddress
            createdAt: string
        }
    }
    orderId: number
}

const OrderSidebar: React.FC<OrderSidebarProps> = ({ orderData, orderId }) => {
    const [isLoadingInvoice, setIsLoadingInvoice] = useState(false)

    const handleInvoice = async () => {
        try {
            setIsLoadingInvoice(true)
            const blob = await api.getInvoice(orderId.toString())

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a')
            link.href = url
            link.download = `invoice-${orderId}.pdf`
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            window.URL.revokeObjectURL(url)

            toast("فاکتور با موفقیت دانلود شد", "success")
        } catch (error) {
            toast("مشکلی در دانلود فاکتور رخ داد", "error")
        } finally {
            setIsLoadingInvoice(false)
        }
    }
    return (
        <div className='lg:w-[280px] w-full p-5 rounded-2xl shadow-lg'>
            <div className='flex items-center gap-2'>
                <div className='text-[#7F7F7F]'>شناسه تراکنش :</div>
                <div className="font-mono">
                    {orderData.payment.transaction_id}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F]'>گیرنده :</div>
                <div>
                    {orderData.order.user.fullName}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F]'>کدپستی :</div>
                <div>
                    {orderData.order.shipmentAddress.postalCode}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F] whitespace-nowrap'>تاریخ ثبت سفارش :</div>
                <div>
                    {orderData.order.createdAt}
                </div>
            </div>

            <div className='flex items-center gap-2 mt-4'>
                <div className='text-[#7F7F7F]'>شماره موبایل :</div>
                <div>
                    {orderData.order.shipmentAddress.phone}
                </div>
            </div>

            <div className='flex items-start gap-2 mt-4'>
                <div className='text-[#7F7F7F] whitespace-nowrap'>آدرس :</div>
                <div>
                    {orderData.order.shipmentAddress.address}
                </div>
            </div>

            <TrackCode orderId={orderId} />

            <Button
                className='mt-3 w-full'
                variant="outline"
                onClick={handleInvoice}
                disabled={isLoadingInvoice}
            >
                {isLoadingInvoice ? 'در حال دانلود...' : 'مشاهده فاکتور'}
            </Button>
        </div>
    )
}

export default OrderSidebar
