import React, { useEffect, useState } from 'react'
import { getInitialValues } from '../formUtil'
import { Tab, TabList, TabPanel as TabBody, Tabs } from 'react-tabs'
import { MdLanguage } from 'react-icons/md'
import ViewPage from '../../../Layout/Dashboard/ViewPage';
import { Rate, Spin } from 'antd';
import { usePageState } from '../../../lib/statemangment/LayoutPagestate';
import LoadingPage from '../../../Layout/app/LoadingPage';
import { useTranslation } from 'react-i18next';
import {  useGetSetting, useUpdateSetting } from '../../../api/setting';
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import Form from './EditForm';
import { useParams } from 'react-router-dom';
import { convertArrayToJsonString } from '../../../utils/Array/convertArrayToJsonString';

const EditPage = () => {
  const { setObjectToEdit, objectToEdit } = usePageState()
  const { t } = useTranslation();
  const {id} = useParams()

  const { data,isRefetching } = useGetSetting({
    show:id
  })
  const { mutate, isSuccess,isLoading:IsloadingButton } = useUpdateSetting()
  
  const handleSubmit = (values:any) => {
      const dataToSend = {...values};

    const slogan = convertArrayToJsonString(values?.slogan);
    const phone_number = values?.phone_number;
    const email = values?.email;
    const contact_info = convertArrayToJsonString([{key: 'phone_number', value:phone_number},{key: 'email', value:email}])

    dataToSend["slogan"] = slogan;
    dataToSend["contact_info"] = contact_info;


    // mutate({...values, _method : "put"});
    console.log(dataToSend,"dataToSend");
    
    
}


  useNavigateOnSuccess(isSuccess, '/Setting')


  useEffect(() => {

    setObjectToEdit(data?.data);

  }, [data]);


  const getValidationSchema = () => {
    return null
  };
  if (  !objectToEdit || isRefetching) {
    return <Spin />
  }

  
  const ViewProps = { getInitialValues, getValidationSchema, handleSubmit,IsloadingButton };

  
  return (
    <div className='ViewPage'>
      {objectToEdit && data ?
        <ViewPage {...ViewProps}>
          <Tabs>
            <TabList>
              <Tab><div className='Tab_Info_Container'><span className='SignleDriverInfoIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>

            </TabList>
            <TabBody >
              <div className=" mt-4"><Form /></div>
            </TabBody>


          </Tabs>
        </ViewPage>
        : <LoadingPage />}


    </div>
  )

}

export default EditPage