import React, {memo, useState} from 'react'
import SiteTemplateSelector from './SiteTemplateSelector';

const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
      console.log("Page data == ", data)

      const fieldData = {}
      Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
        fieldData[value.name] = ''
      })
      const [fields, setFields] = useState(fieldData)
      const handleChange = ({target:{name, value}}) => {
        setFields(prev => ({...prev, [name]:value}))
      }

      const handleSubmit = () => {
        console.log('formInfo', fields)
      }

      if (isCustom ===  true){
          return  <SiteTemplateSelector  name={name} data={data} isCustom={isCustom} productData={productData} />
      }


      return (
        <div className="page-account-form">
            <div className="p-0" style={{ minHeight: '500px'}}>

                <form id='tab_form'>
                    <div className="form-row">
                        <>
                            {Object.entries(data)?.map(([key, value]) => (
                                <div key={key} className="form-group col-md-12">
                                    <label htmlFor="name1">{value.name}</label>
                                    {value.controls == 'TEXT' ?
                                        <input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
                                        :value.controls == 'TEXTAREA' ?
                                        <textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
                                        :
                                        null
                                    }
                                </div>
                            ))}
                        </>
                        <div className="form-group col-md-12" style={{textAlign:'right'}}>
                            <button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
      )
    }
)


export default GeneralTab