import {useParams} from "react-router-dom";

import { useState, useEffect } from 'react';
import AdminApi from "../../api/AdminApi";

export default function OrderDetail() {

    const {id} = useParams();
    const [order, setOrder] = useState([]);
    const [address, setAddress] = useState([]);
    const [customer, setCustomer] = useState([]);
    const [products, setProducts] = useState([]);
    const getOrder = async () => {
        const fetchedOrder = await AdminApi.get(`orders/show/${id}`)
        setOrder(fetchedOrder.data)
        setAddress(fetchedOrder.data.address);
        setCustomer(fetchedOrder.data.customer);
        setProducts(fetchedOrder.data.products);
    }
    const postStatus = async (status) => {
        const fetchResult = await AdminApi.post(`orders/setStatus/${id}`, {'status':'shipped'});
        setOrder(() => fetchResult.data); 
    }
    useEffect(() => {
        getOrder()
    }, [id])

    return (
        <div className="flex flex-col w-full font-[dana]">
            <span className="font-[dana] text-3xl">سفارش شماره {order.id}</span>
            <div className="flex flex-col bg-white w-full rounded-lg p-8 my-8">
                <div className="flex justify-between">
                    <span className="text-2xl">مشخصات سفارش</span>
                    {order.status !== 'shipped' ? (

                    <button onClick={ postStatus } className="bg-gradient-to-r from-4 to-purp hover:opacity-80 transition duration-600 font-[Vazirmatn] text-white rounded-lg w-fit h-full py-2 px-6 flex items-center justify-center">
                        <span className="text-xl py-2 leading-none">تغییر وضعیت به ارسال شده</span>
                    </button>
                    ) : ""}
                </div>
                <div className="flex flex-wrap">
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">وضعیت </span>
                        {
                            order.status === 'shipped' ?
                                <p>ارسال شده</p>
                            : order.status === 'pre' ?
                                <p>پرداخت نشده</p>
                            : <p>پرداخت شده</p> 
                        }
                    </div>
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">متد پستی </span>
                        {order.post_method}
                    </div>
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">مبلغ کل </span>
                        {order.total}
                    </div>
                </div>
                <span className="text-2xl pt-8">مشخصات ارسال </span>
                <div className="flex flex-wrap ">
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">نام تحویل گیرنده</span>
                        {address.name}
                    </div>
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">تلفن تحویل گیرنده</span>
                        {address.phone}
                    </div>
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">کد پستی</span>
                        {address.postal_code}
                    </div>
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">آدرس</span>
                        {address.address}
                    </div>
                </div>
                <span className="text-2xl pt-8">مشخصات مشتری</span>
                <div className="flex flex-wrap ">
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">نام و نام خانوادگی</span>
                        {customer.first_name + " " + customer.last_name}
                    </div>
                    <div className="flex flex-col text-xl p-8">
                        <span className="text-lg text-gray-600">شماره موبایل</span>
                        {customer.phone}
                    </div>
                </div>
            </div>
            <div className="bg-white w-full rounded-lg flex flex-col p-8 mb-8">
                <span className="text-2xl">محصولات سفارش داده شده</span>
                { products.map((product)=> (
                    <div className="flex items-center p-4 border rounded-lg rounded my-2">
                        <img className="w-16 h-16 rounded-lg" src={product.images[0].thumbnail}/>
                        <span className="text-xl pr-4">
                            {product.title}
                        </span>
                        <span className="text-xl px-4 mr-auto">{ Object.values(JSON.parse(product.pivot.variant)).map((v, index) => (
                            <span key={index}>{v + (index != Object.entries(JSON.parse(product.pivot.variant)).length - 1 ? " ، " : "")}</span>
                        ))} 
                        </span>
                        <span className="text-xl px-4 mr-auto">تعداد:‌ <span className="text-2xl pr-2">{ product.pivot.count }</span> </span>
                    </div>
                ))}
            </div>
        </div>
    )
}