import React, { Component } from 'react';
import Portal from '../templates/portal/Portal';
import LoadingContainer from '../shared/Loading';
import '../../theme/css/material-design-iconic-font.css';
import '../../theme/js/functions.js';
import '../../theme/css/styles.css';

import HotDealsListContainer from './HotDealsListContainer';
import HotDealsEditContainer from './HotDealsEditContainer';
import PropTypes from 'prop-types';
import { TextField, FormBlock } from '../templates/home/Home';
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { Slider } from 'redux-form-material-ui';
import './HotDeals.css'

const dataCampanha = [
    {
        id: '1',
        dateStart: '2007-11-08 10:00:00',
        dateEnd: '2007-11-08 18:00:00',
        cashback: 50,
        title: 'Campanha Black Friday'
    },
    {
        id: '2',
        dateStart: '2007-11-12 10:00:00',
        dateEnd: '2007-11-12 18:00:00',
        cashback: 35,
        title: 'Campanha Black Friday 2'
    },
    {
        id: '3',
        dateStart: '2007-12-12 10:00:00',
        dateEnd: '2007-12-12 18:00:00',
        cashback: 35,
        title: 'Campanha Black Friday 3'
    },
];

const toTimePeriod = (dateStart, dateEnd, separator = ' ') => {
    // período de horário somente funciona no mesmo dia
    return moment(dateStart).format('hh:mm') + separator + moment(dateEnd).format('hh:mm')
};

const cols = [
    { id: 'dateStart', label: 'Dia', style: {}, format: (col) => toFormattedDate(col) },
    { id: '', label: 'Horário', style: {}, format: (col, row) => toTimePeriod(row.dateStart, row.dateEnd, ' - ') },
    { id: 'cashback', label: 'Cashback', style: { textAlign: 'center' }, format: (col) => {
        return (<div className="card-cashback">{col} %</div>);
    }},
    { id: 'title', label: 'Campanha', style: {} }
];

const HotDealsListContainer = () => (
    <div className="card">
        <div className="card-header ch-alt">
            <h2>Campanhas
                <small>Agenda de campanhas especiais</small>
            </h2>
        </div>
        <div className="card-body card-padding">
            <div className="list-view">
                <div className="lv-groupable">
                    Outubro
                </div>
                <Table
                    className="table table-list"
                    cols={cols}
                    items={dataCampanha}
                    itemKey="id"
                    groupableCondition={(previousValue, currentValue, index) => {
                        return (index !== 0 && toMonthYear(currentValue.dateStart) !== toMonthYear(previousValue.dateStart));
                    }}
                    groupableText={(item) => { return(toMonthName(item.dateStart)); }}
                />
            </div>
        </div>
    </div>
)

class HotDealsEditContainer extends Component {

    // shouldComponentUpdate(nextProps) {
    //     const {
    //         submitSucceeded,
    //         router
    //     } = nextProps;
    //
    //     if (nextProps.submitSucceeded) {
    //         // save
    //         return false;
    //     }
    //
    //     return true;
    // }

    submit = (values) => {
        // print the form values to the console
        console.log(values)
    }

    render() {
        const {
            data,
            error,
						submitting,
						cashbackValue,
            ...other
				} = this.props;

				// let cashbackValueLabel = cashbackValue * 0.88

        return (
            <div className="card">
                <div className="card-header ch-alt">
                    <h2>Editar Campanha
                        <small>Nome da campanha</small>
                    </h2>
                </div>
                <div className="card-body card-padding p-t-0">
                <form id="hotdeals-form" onSubmit={this.submit}>
                    {error &&
                        <div style={errMsgStyle}>{error}</div>
                    }
                    <Field
                        label="Descrição da campanha"
                        name="title"
                        type="text"
                        value={data[0].title}
                        showIcon={false}
                        showLabel={true}
                        component={TextField}
                    />
                    <DatePickerContainer
                        containerId="DateHotDeals"
                        label="Selecione o dia da campanha"
                        id="dataStart"
                        //formatDate={formatDate}
                        //onChange={onDateStartChange}
                        className='date-range-input'
                    />
                    <TimePickerContainer
                        containerId="timeStartHotdeals"
                        label="Horário início"
                        id="timeStart"
                        value={data[0].dateStart}
                        showIcon={false}
                        //formatDate={formatDate}
                        //onChange={onDateStartChange}
                        className='date-range-input'
                    />
                    <TimePickerContainer
                        containerId="timeEndHotdeals"
                        label="Horário fim"
                        id="timeEnd"
                        value={data[0].dateStart}
                        showIcon={false}
                        //formatDate={formatDate}
                        //onChange={onDateStartChange}
                        className='date-range-input'
                    />

                    {/*<Field name="password" type="password" component={TextField}*/}
                    {/*label="Senha" icon="lock" />*/}

                    {/*<div className="clearfix" />*/}

                    {/*<button className="btn btn-primary btn-lg waves-effect center-button"*/}
                    {/*disabled={submitting} type="submit">Entrar</button>*/}

										<div style={{position:'relative'}}>

										<Field
											className='HotDeals slider'
											name="cashback"
											component={Slider}
											defaultValue={0}
											format={null}
											min={0}
											max={100}
											step={1}
                    >
										</Field>

										<div className='HotDeals cashback-label-container'
										 		style={{position:'absolute', left:`${cashbackValue}%`}}
										>
											<span className='HotDeals cashback-arrow-up'></span>
											<span className='HotDeals cashback-value'>{cashbackValue}%</span>

										</div>

										{/* <span style={{position:'absolute',left:`${cashbackValue}%`}}>{cashbackValue}</span> */}

										</div>
                </form>
            </div>
        </div>
        );
    }
}
const selector = formValueSelector('hotdeals')

HotDealsEditContainer = connect(state => ({
	cashbackValue: selector(state, 'cashback'),
}))(HotDealsEditContainer);

HotDealsEditContainer = reduxForm({
    // a unique name for the form
		form: 'hotdeals',
		initialValues: { cashback: 0 }
})(HotDealsEditContainer);

HotDealsEditContainer.propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    submitSucceeded: PropTypes.bool.isRequired
}

class HotDeals extends Component {
    render() {
        return (
            <Portal>
                <LoadingContainer />
                <div className="block-header">
                    <LoadingContainer />
                </div>
                <div className="row">
                    <div className="col-sm-7">
                        <HotDealsListContainer />
                    </div>
                    <div className="col-sm-5">
                        <HotDealsEditContainer />
                    </div>
                </div>
            </Portal>
        )
    }
}

export default HotDeals