import React, { Component } from 'react'
import { connect } from 'react-redux'
import { graphql, Query } from 'react-apollo'
import { Button, Modal, Form, Checkbox } from 'semantic-ui-react'

import { createArea } from '../../actions/area'
import { AddArea, GetArea } from '../../graphql/mutations/area_mutation'

import { AddFacility } from '../../graphql/mutations/feature_mutation'

import ThankYouModal from './ThankYouModal'
import { getUser } from '../../graphql/queries/users'
import { listofAreas } from '../../graphql/queries/areas'
//listofArea

class ModalUserAddDSA extends Component {


    state = {
        dates: [
            'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
        ],
        form: {
            id_user: '',
            name: '',
            address: '',
            days: [],
            in_valid: true,
            poster_ads: null,
            start_time: '01:00 AM',
            end_time: '01:00 AM',
            facilities: [],
            displayMessage: false,
            user_id: '0',
            // well_ventilated: '',
            openarea: '0',
            enclosedarea: '0',
            wifi: '0',
            seats: '0',
            ashtrays: '0',
            trashbin: '0',
            spacious: '0',
            roof: '0',
            area_name: '0',
        },
        hours: Array(24).fill().map(
            (item, index) => {
                const hour = index + 1
                const isAMorPM = hour < 13 ? 'AM' : 'PM'
                const pmHour = hour - 12
                const time =
                    hour < 10
                        ? `0${hour}`
                        : hour > 12
                            ? pmHour < 10
                                ? `0${pmHour}`
                                : pmHour
                            : hour

                return `${time}:00 ${isAMorPM}`
            }
        ),
        // facility: [
        //   'Well-ventilated',
        //   'Open Area',
        //   'Enclosed Area',
        //   'Wifi',
        //   'Seats',
        //   'Ashtrays',
        //   'Trash Bins',
        //   'Spacious',
        //   'Roof',
        //   'area_name'
        // ],
        area_name: 'default'
    }


    render() {

        const { open } = this.props
        const { dates, hours, displayMessage, form: { name, address, in_valid, start_time, end_time, well_ventilated }, facility } = this.state

        return (
            <Query query={getUser}>

                {({ data }) => {
                    console.log(data.user.profile.first_name, "USERR")
                    console.log(data, "USER DATA")

                    // this.setState({
                    //     id_user: data.user.id
                    // })

                    return (
                        //
                        <Query query={listofAreas}>
                        {({ data }) => {
                           // console.log(data)
                            return (
                            <div>
                            <ThankYouModal open={displayMessage} onDone={this.handleModalClose} />
                            <Modal size="small" className="edit-profile default" open={open} onClose={this.handleClose} closeIcon trigger={<Button>Scrolling Content Modal</Button>}>
                                <Modal.Content>
                                    <Modal.Description>
                                        <div className="redaeh">
                                            <h4>Add a Location</h4>
                                        </div>
                                        <div className="body">
                                            <div className="yo_form is-edit">
                                                <Form onSubmit={this.handleSubmit}>
                                                    <Form.Field>
                                                        <label>Location Name <span>*</span></label>
                                                        <input required name="name" value={name} onChange={this.handleChange} type="text" />
                                                    </Form.Field>
                                                    {/*
                                        <Form.Field>
                                            <label>Address <span>*</span></label>
                                            <input required name="address" value={address} onChange={this.handleChange} type="text" />
                                        </Form.Field>
                                        */}
                                                    <Form.Group className="in-line">
                                                        <p>Days Available</p>
                                                        {dates && dates.map(
                                                            (label, i) => (
                                                                <Form.Field key={`label-for-${label}`}>
                                                                    <Checkbox onChange={() => this.handleCheckboxChange(i, label)} label={label} />
                                                                </Form.Field>
                                                            )
                                                        )}
                                                    </Form.Group>
                                                    <Form.Group className="col2">
                                                        <p>Time Available</p>
                                                        <Form.Field>
                                                            <div className="yo_select">
                                                                <select required value={start_time} onChange={this.handleChange} name='start_time'>
                                                                    <option defaultValue disabled>From</option>
                                                                    {hours && hours.map(
                                                                        (timeString, index) => (
                                                                            <option key={index} value={timeString} defaultValue children={timeString} />
                                                                        )
                                                                    )}
                                                                </select>
                                                            </div>
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <div className="yo_select">
                                                                <select required value={end_time} onChange={this.handleChange} name='end_time'>
                                                                    <option defaultValue disabled>To</option>
                                                                    {hours && hours.map(
                                                                        (timeString, index) => (
                                                                            <option key={index} value={timeString} defaultValue children={timeString} />
                                                                        )
                                                                    )}
                                                                </select>
                                                            </div>
                                                        </Form.Field>
                                                    </Form.Group>
                                                    <Form.Field>
                                                        <label>Photo</label>
                                                        <input type="file" onChange={this.handleFileChange} name='poster_ads' />
                                                    </Form.Field>
                                                    <Form.Group className="in-line">
                                                        <p>Facilities</p>
                                                        {/* <input required name="name" value={name} onChange={this.handleChange} type="text" /> */}
                                                        <Form.Field>
                                                            <div className="">
                                                                <input className="" checked={this.state.checked} type="checkbox" label="Well-ventilated" name="well-ventilated"
                                                                value={well_ventilated}
                                                                onChange={this.handleFacilityObject.bind(this)} />

                                                            </div>
                                                            <label>Well-ventilated </label>
                                                        </Form.Field>

                                                        <Form.Field>
                                                            <Checkbox label="Open Area" name="openarea" value={this.openarea} onChange={this.handleFacilityObject.bind(this)} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Enclosed Area" name="enclosedarea" value={this.enclosedarea} onChange={this.handleFacilityObject} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Wifi" name="wifi" value={this.wifi} onChange={this.handleFacilityObject} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Seats" name="seats" value={this.seats} onChange={this.handleFacilityObject} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Ashtrays" name="ashtrays" value={this.ashtrays} onChange={this.handleFacilityObject} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Trash Bins" name="trashbin" value={this.trashbin} onChange={this.handleFacilityObject} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Spacious" name="spacious" value={this.spacious} onChange={this.handleFacilityObject} />
                                                        </Form.Field>
                                                        <Form.Field>
                                                            <Checkbox label="Roof" name="roof" value={this.roof} onChange={this.handleFacilityObject} />
                                                       </Form.Field>
                                                        {/* { facility && facility.map(
                                                          (label, i ) => (
                                                            <Form.Field key={`label-for-${label}`}>
                                                              <Checkbox onChange={() => this.handleCheckboxFacilityChange(i, label)} label={label} />
                                                            </Form.Field>
                                                          )
                                                        )} */}
                                                    </Form.Group>
                                                    <div className="text-right">
                                                        <Button disabled={in_valid} className='default' type='submit'>Submit</Button>

                                                    </div>
                                                </Form>
                                            </div>
                                        </div>
                                    </Modal.Description>
                                </Modal.Content>
                            </Modal>
                        </div>)

                    }}
                    </Query>)
                }}

            </Query>
        )
    }



    handleSubmit = () => {
        const reader = new FileReader()
        const { mutate, createArea, coordinate: { lat, lng } } = this.props
      //console.log(this.props)
        const { form: {
            days,
            openarea,
            enclosedarea,
            wifi,
            seats,
            ashtrays,
            trashbin,
            spacious,
            roof,
            area_name,
            poster_ads, in_valid, ...rest },
        } = this.state
        const data = {
            ...rest,
            days: `[${days.join(', ')}]`,
            days_of_availability: '',
            time_schedule: '',
            notes: '',
            partnership: '',
            promotional_ads: '',
            date_period: '',
            lat: `${lat}`,
            long: `${lng}`,
            typeOfDSA: 'userdsa',
            verify: '0',
            // facilities: `[${facilities.join(', ')}]`
            user_id: '69',
            well_ventilated: '',
            // facilities: `[${facilities}]`
            openarea: '0',
            enclosedarea: '0',
            wifi: '0',
            seats: '0',
            ashtrays: '0',
            trashbin: '0',
            spacious: '0',
            roof: '0',
            area_name: ''

        }

        console.log(data.well_ventilated, "FACILITIES")
        console.log(data.name, "Name")
        console.log(data)



        this.setState({ displayMessage: true })

        if (poster_ads) {
            reader.readAsBinaryString(poster_ads)
            reader.onload = () => {
                const dataWithFile = { ...data, poster_ads: `data:application/octet-stream;base64,${btoa(reader.result)}` }

               createArea(mutate, dataWithFile, true)
            }

            return
        }
      createArea(mutate, { ...data, poster_ads: '' }, true)
    }

    // handleFacilityObject = ({ target: { name, value } }) => {

    //     console.log([name], "NAME")

    // }

    handleFacilityObject (e) {
        let value = e.target.value
            if (e.target.checked && e.target.name === "well-ventilated") {
                this.setState(({ data }) => ({
                    data: {
                        ...data,
                        well_ventilated: '1'
                    }
                }))
            } else {
                this.setState(({ data }) => ({
                    data: {
                        ...data,
                        well_ventilated: '0'
                    }
                }))
            }
        // console.log(well_ventilated, "state")
        console.log(value)
        console.log(e.target.checked)
    }

    handleChange = ({ target: { name, value } }) => {
        this.setState(({ form }) => ({
            form: {
                ...form,
                [name]: value
            }
        }))
    }

    handleFileChange = ({ target: { files } }) => {
        this.setState(({ form }) => ({
            form: {
                ...form,
                poster_ads: files ? files[0] : null
            }
        }))
    }

    handleCheckboxFacilityChange = (index, label) => {
      this.setState(({ form }) => {
        const facilities =
                 form.facilities.includes(label)
                    ? form.facilities.filter((fa) => fa !== label)
                   : form.facilities.length ? [...form.facilities, label] : [label]

          //const facilities = [...form.facilities, label] : ]label]

            return {
                form: {
                  ...form,
                  facilities
                }
            }
        })
    }


    handleCheckboxChange = (index, label) => {
        this.setState(({ form }) => {
            const days =
                form.days.includes(label)
                    ? form.days.filter((day) => day !== label)
                    : form.days.length ? [...form.days, label] : [label]
            return {
                form: {
                    ...form,
                    days,
                    in_valid: days && days.length < 1
                }
            }
        })
    }

    handleClose = () => {
        this.props.onClose()
    }

    handleModalClose = () => {
        this.setState({ displayMessage: false })
        window.location.href = '/map'
    }
}

const ModalUserAddDSAComponent = graphql(AddArea)(ModalUserAddDSA)

export default connect(null, { createArea })(ModalUserAddDSAComponent)