import Input from "@/Components/Inputs/Input"
import { atom, useAtom } from "jotai"
import React, { ReactElement } from "react"

const testAtom = atom<Record<string, string | undefined>>({})

interface IConfigRow {
    id: string
    label: string
    type: string
}
const config = [
    {
        id: '1',
        label: 'First',
        type: 'text'
    },
    {
        id: '2',
        label: '2',
        type: 'text'
    },
    {
        id: '3',
        label: '3',
        type: 'text'
    }
]

const inputsMap: Record<string, React.FC<IConfigRow>> = {
    text: (row: IConfigRow) => {
        const [test, setTest] = useAtom(testAtom)
        return <Input
            id={row.id}
            testId={row.id}
            label={row.label}
            value={test[row.id] ?? ''}
            onChange={(e) => {
                test[row.id] = e
                setTest({ ...test })
            }}
        />
    }
}

const InputMaker = (row: IConfigRow): ReactElement => {
    const Component = inputsMap[row.type]
    return (<div>{
        Component !== undefined
            ? <Component {...row} />
            : <p>{row.type} not supported</p>
    }</div>

    )
}

const InputMakerWrap = (): ReactElement => {
    const [test] = useAtom(testAtom)
    return <div className='p-10 bg-slate-200'>
        {
            config.map(row => {
                return <InputMaker key={row.id} {...row} />
            })
        }
        <pre className='m-20 p-20 bg-slate-200'>{JSON.stringify(test, null, 2)}</pre>
    </div>
}

export default InputMakerWrap