import React from 'react';
import Modularity from 'modularity-front';
import {Row,CardTitle,Button,Col,Card} from 'react-materialize';

import Modules from '../Modules/index.js';

import FilterModule from '../Modules/FilterModule.js';

let {
	Table,
	Pagination,
    Form
} = Modules;

let Module = Modularity.Module;

// NOT USED ANYWHERE YET

class Search extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
            page: 1,
            data: [],
            totalPages: 1,
            showForm: false,
            model: {},
            mode: 0,
            formButton: "Add" 
		}

        this.service.onUpdate(() => this.serviceUpdate(this.state.page));
        this.serviceUpdate(this.state.page);
	}
    
    _rowDeleted(row){
        if(!row) return;
        let Service = this.service.value;
        if(Service.delete && row.id)
            Service.delete(row.id).then(() => this.serviceUpdate(this.state.page));
    }
	handleClick() {
		console.log("added");
	}

    prepareForm(headers, row = {}) {
        let mod = {};
        console.log(headers);
        for (let i in headers) {
            if(!headers[i])continue;
            //if(headers[i].fieldName === "id") continue;
            mod[headers[i].Name || headers[i].fieldName] = {
                type:"text",
                placeholder:i,
                columns:6,
                value: row[i],
                filter: headers[i].filter
            };
        }
        return mod;
    }

    showAddForm() {
        let headers = (this.TableHeaders.value);
        // add Required !
        let mod = this.prepareForm(headers);
        this.setState({
            showForm: true,
            model : mod,
            mode: 0,
            formButton: 'Add'
        });
    }

	render() {
        let page     = this.state.page,
            totalPages = this.state.totalPages,
            data  = this.state.data;
           
     

        let TableView = 
                <Row style={{display: 'flex'}}>
                    <Col s={2}  style={this.props.filterStyle} className={this.props.filterClassName}>
                        <FilterModule Inputs={this.FilterInput.value} Filters={(filters) => this.setFilters(filters)}/>
                    </Col>
                    <Col s={10}>
                        <Table  TableHeaders={this.TableHeaders.value} TableData={data} 
                                TableClass={this.TableClass.value} LiveEdit={this.LiveEdit.value}
                                EditedRow={(v) => this.rowEdit(v)}  onEdit={(v) => this._rowEdited(v)} onDelete={(v) => this._rowDeleted(v)}/>
                        <Row>
                            <Col offset="s10" >
                            <Button onClick={() => this.showAddForm()}>Add</Button>
                            </Col>
                        </Row>
                        <Pagination selected={page} lastPage={totalPages} onPage={(v) => this.pageChanged(v)} />
                    </Col>
                </Row>;
        let FormView = 
        <Row key={Math.random()}>
            <Col s={12}>
                <Form FormInputs={this.state.model} button={this.state.formButton} formData={(data) => this.state.mode ? this.update(data) : this.add(data)}>
                </Form>
            </Col>
        </Row>;

		return [this.state.showForm ? FormView : TableView,super.render()];
				    
	}
}


Search.Inputs = {
    service: {
        type: Module.Types.Object,
        defaultValue: {}
    },
	perPage: {
		type: Module.Types.Number,
        defaultValue: 2
	},
	TableHeaders:{
        type: Module.Types.Object,
        defaultValue:{
            "Id" : "id",
            "Name" : "name",
            "Value": "price"
           }
    },
    TableClass:{
        type: Module.Types.Text,
        defaultValue:"striped centered"
    },
    LiveEdit:{
        type: Module.Types.Boolean,
        defaultValue:false
    },
    FilterInput: {
        type: Module.Types.Array,
        arrType: Module.Types.Object
    }
}

Search.Outputs = {
    onFilters: {}
}

Search.Category = "Nikatlas";
Search.EditPosition = "top-right";
export default Search;