import React, { useEffect } from 'react'
import { getInitialValues, getDataToSend } from './Edit/formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import 'react-tabs/style/react-tabs.css';
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../Layout/Dashboard/ViewPage';
import {  Spin } from 'antd';
import { usePageState } from '../../lib/state mangment/LayoutPagestate';
import { useParams } from 'react-router-dom';
import LoadingPage from '../../Layout/app/LoadingPage';
import { useTranslation } from 'react-i18next';
import useNavigateOnSuccess from '../../Hooks/useNavigateOnSuccess';
import { useGetOneOrder, useUpdateOrder } from '../../api/order';
import { FaEdit, FaFirstOrderAlt } from 'react-icons/fa';
import ProductsPage from './Products/ProductsPage';
import Form from './Edit/EditForm';
import ViewForm from './View/ViewForm';



const EditPage = () => {
  const { setObjectToEdit, objectToEdit } = usePageState()
  const {t} = useTranslation();
  const {mutate ,isSuccess,isLoading:IsloadingButton} = useUpdateOrder("put")
  const { id } = useParams();
  const { data, isLoading } = useGetOneOrder({id: id })
  const handleSubmit = (values:any) => {
    // Create a new object without empty string values
    const cleanedValues = {} as any;
    for (let key in values) {
        if (values[key] !== "") {
            cleanedValues[key] = values[key];
        }
    }

    // Optionally format the deliviration_estimated_time if it exists
    if (cleanedValues.deliviration_estimated_time) {
        cleanedValues.deliviration_estimated_time = cleanedValues.deliviration_estimated_time.format('YYYY-MM-DD HH:mm:ss');
    }

    if(cleanedValues.deliviration_estimated_time === "Invalid Date"){
      delete cleanedValues["deliviration_estimated_time"]
    }

    // Log the formatted deliviration_estimated_time
    console.log(cleanedValues.deliviration_estimated_time);

    // Mutate with the cleaned values
    return mutate(cleanedValues);
}


  useNavigateOnSuccess(isSuccess , '/order')


  useEffect(() => {
    
    setObjectToEdit(data?.data);
     
  }, [data]);


   const getValidationSchema = () => {
    return null
  };


  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsloadingButton };
  if (  isLoading || !objectToEdit) {
    return <Spin />
  }


 

  return (
    <div className='ViewPage'>
      {objectToEdit && data?.data ?
        <ViewPage {...ViewProps}>
          <Tabs>
            <TabList>
              <Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><FaEdit size={20} /></span> <h6 className='SingleDriverInfo'>{t("EditDetails")}</h6></div></Tab>
              <Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='SingleDriverInfo'>{t("BasicInfo")}</h6></div></Tab>
              <Tab><div className='SignleDriverContainer'><span className='SignleDriverInfoIcon'><FaFirstOrderAlt size={20} /></span> <h6 className='SingleDriverInfo'>{t("OrderItems")}</h6></div></Tab>

            </TabList>
            <TabBody >
              <div className=" mt-4"><Form /></div>
            </TabBody>
         
            <TabBody >
              <div className=" mt-4"><ViewForm /></div>
            </TabBody>
            <TabBody >
              <div className=" mt-4"><ProductsPage /></div>
            </TabBody>
    
          </Tabs>
        </ViewPage>
        : <LoadingPage />}


    </div>
  )

}

export default EditPage