Code

import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { WebConfigurationType, WebConfigType } from '@/type/web'
import { getData, postData, putData } from '@/utility/fetch'
import { showMessage } from '@/components/alerts/showMessage';

const STATUS_COLORS = {
    active: 'green',
    maintenance: 'red',
};

const STATUS_TEXT = {
    active: 'Aktif',
    maintenance: '(Maintenance)',
};

const CheckboxSwitch = ({ label, name, checked, onChange }: any) => {
    const labelColor = checked ? STATUS_COLORS.maintenance : STATUS_COLORS.active;

    return (
        <div className="input-banner mb-5">
            <div className="mb-2 flex justify-between gap-4">
                <div className="flex gap-2">
                    <div className="label-banner style={black}">{label}</div>
                    <div className="label-banner" style={{ color: labelColor }}>
                        {checked ? STATUS_TEXT.maintenance : STATUS_TEXT.active}
                    </div>
                </div>

                <label className="relative h-6 w-12">
                    <input
                        type="checkbox"
                        className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                        id={`custom_switch_checkbox_${name}`}
                        checked={checked}
                        onChange={onChange}
                        name={name}
                    />
                    <span className={`block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white`}></span>
                </label>
            </div>
        </div>
    );
};

function WebConfig() {

    const router = useRouter()
    const [webConfig, setWebConfig] = useState<WebConfigType>()
    const [config, setConfig] = useState<WebConfigurationType[]>([])
    const [checkStatus, setCheckStatus] = useState(() => {
        const initial: any = {}
        config.forEach((item: any) => {
            initial[item?.name] = item?.is_maintenance
        })
        return initial
    })
    // const initialStatus = {
    //     Beranda: webConfig?.Beranda || false,
    //     Profil: webConfig?.Profil || false,
    //     Template: webConfig?.Template || false,
    //     Pekerjaan: webConfig?.Pekerjaan || false,
    //     Blog: webConfig?.Blog || false,
    //     Bantuan: webConfig?.Bantuan || false
    // }
    // const [status, setStatus] = useState<any>(initialStatus)
    // config.reduce((item: any, index: any) => {
    //     item[item?.name] = item?.is_maintenance
    //     return item
    // }, {})

    useEffect(() => {
        const getDataWeb = async () => {
            try {
                const {data} = await getData('/page-configuration')
                setConfig(data.page_configuration)
            } catch (error: any) {
                return error
            }
        }
        getDataWeb()
    },[])


    const handleChangeBox = (name: string) => {
        setCheckStatus({...checkStatus, [name]: !checkStatus[name]})
        // setStatus((prev: any) => ({
        //     ...prev,
        //     [name]: !prev[name]
        // }))
        // setConfig((prev) => prev.map((item: any) => item?.name === name ? {...item, is_maintenance: !item?.is_maintenance} : {...item}))
        // setConfig((prev: any) => prev.map((item: any) => item?.name === name))

    }

    // console.log(config)

    console.log(checkStatus)

    const generateDialog = async () => {

        // console.log(checkStatus)
        try {
            await putData('/page-configuration', checkStatus)
            showMessage('Berhasil', 'success')
        } catch (error) {
            showMessage('Gagal', 'error')
        }
    }


    const handleMultiplyCheck = async (ev: React.FormEvent) => {
        ev.preventDefault()
        generateDialog()
    }


    return (
        <>
            <div className='h-full w-full p-4'>
                <div className='w-full h-full bg-white rounded-lg shadow-md border border-slate-200 p-3'>
                    <div className='w-full px-4 py-3 flex justify-between items-center mb-9'>
                        <div>
                            <h3 className='font-semibold text-3xl'>Web Configuration</h3>
                        </div>
                        {/* <button className='bg-[#376DDB] border border-[#2a5bbc] text-white font-semibold whitespace-nowrap px-5 py-2 rounded-md text-base flex items-center gap-3'
                        onClick={() => router.push('./web-config/input')}
                        >
                            <span>+</span>
                            <span>Tambah Data</span>
                        </button> */}
                    </div>
                    <div className='w-full p-3 flex flex-col gap-4'>
                        {config.map((item: any, index: any) => (
                            <CheckboxSwitch
                                label={item?.name}
                                name={item?.name}
                                checked={checkStatus[item?.is_maintenance]}
                                onChange={() => handleChangeBox(item?.name)}/>
                        ))}
                        {/* <CheckboxSwitch label='Beranda' name='Beranda' checked={status.Beranda} onChange={handleChangeBox}/>
                        <CheckboxSwitch label='Profil' name='Profil' checked={status.Profil} onChange={handleChangeBox}/>
                        <CheckboxSwitch label='Template' name='Template' checked={status.Template} onChange={handleChangeBox}/>
                        <CheckboxSwitch label='Pekerjaan' name='Pekerjaan' checked={status.Pekerjaan} onChange={handleChangeBox}/>
                        <CheckboxSwitch label='Blog' name='Blog' checked={status.Blog} onChange={handleChangeBox}/>
                        <CheckboxSwitch label='Bantuan' name='Bantuan' checked={status.Bantuan} onChange={handleChangeBox}/> */}
                        <button
                            onClick={handleMultiplyCheck}
                            className='p-2 rounded-md bg-blue-400 text-white font-semibold'
                        >
                            Simpan
                        </button>
                    </div>
                </div>
            </div>
        </>
    )
}

export default WebConfig