import React, { FC,MouseEventHandler, useState } from 'react'
import VerticalFormData from '../types/VerticalForm'
import Button from './Button'
import TextField from './TextField'
interface VerticalFormProps{
    items : VerticalFormData[],
    itemIndex: number  
    onChange: (data:VerticalFormData[]) => void
    sectionData?: VerticalFormData
}


const VerticalForm : FC<VerticalFormProps> = (props) => {

    const {items, itemIndex,  sectionData, onChange} = props

    const Item = (item : any, index: any, sectionData: any) => {
        return <div key={index} className="item-list">
            <TextField inputType="text"  value={sectionData[item]} name={item} onChange={handleChange} label={item}/> 
            <div className="button-controls"> 
                <Button id={`tr-button-${index}`} onClick={()=>onClickType(item,'tr')}  buttonClass={`${sectionData[item] === 'tr' ? "c-btn c-btn-green c-btn-mini" : "c-btn c-btn-white c-btn-mini"}`} label="Tr"/>
                <Button id={`desc-button-${index}`} onClick={()=>onClickType(item,'desc')} buttonClass={`${sectionData[item] === 'desc' ? "c-btn c-btn-green c-btn-mini" : "c-btn c-btn-white c-btn-mini"}`} label="Desc"/>
            </div>   
        </div>
    }

    function handleChange(e: { target: HTMLInputElement }): void {
        const { name, value } = e.target;
        let newArr = items? items : []
        newArr[itemIndex] = { ...newArr[itemIndex!], [name]: value };
        onChange(newArr);
    }

    function onClickType(name: any,e: any): void {
        let newArr = items? items : []
        newArr[itemIndex] = { ...newArr[itemIndex!], [name]: e };
        onChange(newArr)
    }

    return (
            <>
            <div className="vertical-form" style={{
                padding:8
            }}>
                <div className="header-verticalForm">
                    {sectionData?.type}
                </div>
                <div className="list-input-verticalForm">
                    {
                        Object.keys(sectionData!).map((e, indexItem) => {
                            if(e !== 'type'){
                                return Item(e, indexItem, sectionData)
                            }
                            return ""
                        })
                    }
                </div>
                
            </div>
            </>
    )
}

export default VerticalForm