import React, { useEffect, useState } from 'react'
import { getInitialValuesForAdd as getInitialValues, getValidationSchema, getDataToSend } from './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 { useTranslation } from 'react-i18next';
import useNavigateOnSuccess from '../../../Hooks/useNavigateOnSuccess';
import { useAddUsers } from '../../../api/users';
import Form from './AddForm';
import { useParams } from 'react-router-dom';
import { useAddNotification } from '../../../api/notification';

const AddPage = () => {


  const { mutate, isLoading:IsLoadingButton, isSuccess } = useAddNotification()
  const {id} = useParams()
  const handleSubmit = (values: any) => {
    const hasAsterisk = values?.user_ids.some((item:any) => typeof item === 'string' && item.includes('*'));
    
    const userIds = hasAsterisk ? { notifyAll: 1 } : { user_ids: values?.user_ids };
  
    const body = {
      en: values.body_en,
      ar: values.body_ar,
      de: values.body_de
    };
  
    const meta = {};
  
    const title = {
      en: values.title_en,
      ar: values.title_ar,
      de: values.title_de
    };
  
    const dataToSend = {
      body: body,
      meta: meta,
      title: title,
      type: "other",
      ...userIds
    };
    
    console.log(dataToSend?.notifyAll);
    
    mutate(dataToSend);
  };
  

  const { t } = useTranslation();

  useNavigateOnSuccess(isSuccess, '/notification')



  const ViewProps = { getInitialValues, getValidationSchema, getDataToSend, handleSubmit,IsLoadingButton };


  return (
    <div className='ViewPage'>

      <ViewPage {...ViewProps}>
        <Tabs>
          <TabList>
            <Tab><div className='TabContainer'><span className='TabIcon'><MdLanguage size={20} /></span> <h6 className='Tab_Info'>{t("BasicInfo")}</h6></div></Tab>



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

        </Tabs>
      </ViewPage>



    </div>
  )

}

export default AddPage