import React from 'react';
import { Form, Button } from 'react-bootstrap';
import TextBox from '../../elements/textField'
import CheckBox from '../../elements/checkbox';
import Select from '../../elements/selectpicker';
import DateTime from '../../elements/datepicker';
class UtilsService {




  async isFormValid(formState) {

        // const { form } = formState.template;
        //     form.map(formList => {
        //         formList.formGroup.input(elem => {
        //             console.log("Error ==========>"+JSON.stringify(elem));
        //         })
        //     })

        



        // console.log("formData"+ JSON.stringify(formState));

        // return true;
  }




  async constructFormControlGroup(source) {
      //let formData;
    console.log('utils', source);
    source.forEach(
        (element) => {
            if (element.type === 'text') {
            
            }
            console.log('element', element.type);
        }
    );
  }

  /*
  * template : form elements
  * formContent : array variable to push the form elements
  */

    async constructFormElements(template, formContent, scope) {

        if(template.type === "text" || template.type === "password" || template.type === "email") {
            
            formContent.push(
            <div className={"col "+ template.class } key={template.id+'00t'}>
                <TextBox key={template.id} 
                    id={template.id}
                    type={template.type}
                    placeholder={template.placeholder} 
                    name={template.name}
                    value={scope.state[template.name]}
                    label={template.labelName}
                    onChange={scope.handleChange}
                    />
            </div>
            );
        } 

        if(template.type === "select") {

            formContent.push(
                <div className={"col "+ template.class }  key={template.id+'00s'}>
                <Select key={template.id} 
                    id={template.id} 
                    label={template.labelName} 
                    name={template.name}
                    type={template.type}
                    value={scope.state[template.name]}
                    isValid={template.isValid}
                    options={template.options}
                    onChange= {scope.handleChange} />
                </div>   
            );
        }

        if(template.type === "checkbox" || template.type === "radio") {
            formContent.push(
                <div className={"col "+ template.class }  key={template.id+'00s'}>
                    <CheckBox key={template.id} 
                        id={template.id} 
                        label={template.labelName}
                        name={template.name} 
                        type={template.type}
                        value={scope.state[template.name]}
                        isValid={template.isValid}
                        options={template.options}
                        onChange= {scope.handleChange}
              />
                </div>
             );
        }

        if(template.type === "datepicker" || template.type === "timepicker") {
        
            formContent.push(
                <div className={"col "+ template.class }  key={template.id+'00dt'}>
                <DateTime key={template.id} 
                id={template.id} 
                label={template.labelName} 
                name={template.name}
                value={scope.state[template.name]}
                type={template.type}
                isValid={template.isValid}
                onChange= {scope.handleChange} />
                </div>  
            );
        }
        
        if(template.type === "label") {

            formContent.push(
                <div className={"col "+ template.class }  key={template.id+'00lbl'}>
                    <Form.Group controlId={template.id}>
                        <Form.Label>{template.labelName + " :"}&nbsp;&nbsp;</Form.Label>
                        <Form.Label>{template.value}</Form.Label>
                    </Form.Group>
                </div>
            );
        }

        if(template.type === "submit" || template.type === "button") {
        
            formContent.push(
                <div className={"col "+ template.class }  key={template.id+'02'}>
                <Form.Group controlId={template.id}>
                    <Button variant="primary" type={template.type}>{template.value}</Button>
                </Form.Group>
                </div>
                
            );
        }

        return formContent;
    }

 /*
  * template : form elements
  * formContent : array variable to push the form elements
  */

 async constructTableRowElements(template, formContent, scope) {

    if(template.type === "text" || template.type === "password" || template.type === "email") {
        
        formContent.push(
        <td className={"col "+ template.class } key={template.id+'00t'}>
            <TextBox key={template.id} 
                id={template.id}
                type={template.type}
                placeholder={template.placeholder} 
                name={template.name}
                value={scope.state[template.name]}
                label={template.labelName}
                onChange={scope.handleChange}
                />
        </td>
        );
    } 

    if(template.type === "select") {

        formContent.push(
            <td className={"col "+ template.class }  key={template.id+'00s'}>
            <Select key={template.id} 
                id={template.id} 
                label={template.labelName} 
                name={template.name}
                type={template.type}
                value={scope.state[template.name]}
                isValid={template.isValid}
                options={template.options}
                onChange= {scope.handleChange} />
            </td>   
        );
    }

    if(template.type === "checkbox" || template.type === "radio") {
        formContent.push(
            <td className={"col "+ template.class }  key={template.id+'00s'}>
                <CheckBox key={template.id} 
                    id={template.id} 
                    label={template.labelName}
                    name={template.name} 
                    type={template.type}
                    value={scope.state[template.name]}
                    isValid={template.isValid}
                    options={template.options}
                    onChange= {scope.handleChange}
          />
            </td>
         );
    }

    if(template.type === "datepicker" || template.type === "timepicker") {
    
        formContent.push(
            <td className={"col "+ template.class }  key={template.id+'00dt'}>
            <DateTime key={template.id} 
            id={template.id} 
            label={template.labelName} 
            name={template.name}
            value={scope.state[template.name]}
            type={template.type}
            isValid={template.isValid}
            onChange= {scope.handleChange} />
            </td>  
        );
    }
    
    if(template.type === "label") {

        formContent.push(
            <td className={"col "+ template.class }  key={template.id+'00lbl'}>
                <Form.Group controlId={template.id}>
                    <Form.Label>{template.labelName + " :"}&nbsp;&nbsp;</Form.Label>
                    <Form.Label>{template.value}</Form.Label>
                </Form.Group>
            </td>
        );
    }

    if(template.type === "submit" || template.type === "button") {
    
        formContent.push(
            <td className={"col "+ template.class }  key={template.id+'02'}>
            <Form.Group controlId={template.id}>
                <Button variant="primary" type={template.type}>{template.value}</Button>
            </Form.Group>
            </td>
            
        );
    }

    return formContent;
}

async loadInputElement(template) {
    return(<td>{"Rows"+template.name}</td>);
}
}
export default UtilsService;