import React, { Fragment } from "react";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPrint, faReply } from '@fortawesome/free-solid-svg-icons'
import { Tabs, Tab, Row, Nav, Col, Modal, Button, Container } from "react-bootstrap";
import MultiSelectListBox from "react-multiselect-listbox";

import CajaTexto from '../../components/UI/cajaTexto/cajaTexto.jsx';
import CajaTextoNumero from '../../components/UI/cajaTexto/cajaTextoNumero.jsx';
import RadioButton from '../../components/UI/radioButton/radiobutton.jsx';
import Botones from '../../components/UI/botonera/headerBotones.js';
import ComboBox from '../../components/UI/comboBox/combobox.jsx';

export default class ModalRepPersonalizado extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tabActivo: "general-tab",

        }
    }

    componentDidMount = () => {

    }

    render() {
        const { selectedOrientacion, radioOptionsOrientacion, show, listaColumnas, listaColumnasDest, selectedColumnas, botonesModal, listaAlinear, selectedOptionAlinear } = this.props;
        const { tabActivo } = this.state;
        let Datos = { ...this.props.Datos };

        Datos.Titulo.attributes.hidden = 'unset';
        Datos.Subtitulo.attributes.hidden = 'unset';
        Datos.Orientacion.attributes.hidden = 'unset';

        let crearOpcion = function (x, i) {
            return <option key={i} value={x.value}>{x.text}</option>;
        };

        return (
            <Fragment>
                <Modal size="lg" show={show} animation={false} onHide={() => { this.props.handleModal(false) }}>
                    <Modal.Header closeButton>
                        <Modal.Title>Personalizado de Empleados</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div className='row'>
                            <div className='col'>
                                <Tabs
                                    defaultActiveKey={'general-tab'}
                                    activeKey={tabActivo}
                                    id="TabPersonalizado"
                                    className="nav-tabs2"
                                    onSelect={(id) => { this.setState({ tabActivo: id }) }}
                                >
                                    <Tab eventKey="general-tab" title={'General'} style={{ opacity: '100' }}>
                                        <div className='row'>
                                            <CajaTexto col="12" id="Empresa" type="text" label='Empresa' value={this.props.NombreEmpresa} attributes={{ readOnly: true, focus: false, label: "Empresa", hidden: "unset" }} onChangeInput={() => { }} />
                                        </div>
                                        <div className='row'>
                                            <CajaTexto col="12" id="Titulo" type="text" label={Datos.Titulo.attributes.label} value={Datos.Titulo.value} attributes={Datos.Titulo.attributes} onChangeInput={this.props.onChangeInputEmp} />
                                        </div>
                                        <div className='row'>
                                            <CajaTexto col="12" id="Subtitulo" type="text" label={Datos.Subtitulo.attributes.label} value={Datos.Subtitulo.value} attributes={Datos.Subtitulo.attributes} onChangeInput={this.props.onChangeInputEmp} />
                                        </div>
                                        <div className='row'>
                                            <RadioButton id="selectedOrientacion" col="12" attributes={Datos.Orientacion.attributes} value={selectedOrientacion} label="Orientación" datos={radioOptionsOrientacion} onChange={this.props.handleRadioButton} horizontal={true} />
                                        </div>
                                    </Tab>
                                    <Tab eventKey="columnas-tab" title={'Columnas'} style={{ opacity: '100' }}>

                                        <div className='row'>
                                            <div className='col col-xs-1'>&nbsp;</div>
                                            <div className='col col-xs-4'>
                                                <div className='form-group'>
                                                    <label>Columnas Disponibles</label>
                                                    <select
                                                        className='form-control'
                                                        multiple
                                                        name="listColumnas"
                                                        id="listColumnas"
                                                        onChange={this.props.handleChangeSelectList}>
                                                        {listaColumnas.map(crearOpcion)}
                                                    </select>
                                                </div>
                                            </div>
                                            <div className='col col-md-2 col-botones ' >
                                                <br />
                                                <br />
                                                <div class="tooltip2">
                                                    <span class="tooltiptext2">Agregar</span>
                                                    <a className='pull-right flipInX animated btn btn-sm' type='button' name='agregarElementos' onClick={this.props.moverItemsLista}>{'>>'}</a>
                                                </div>
                                                <br />
                                                <div class="tooltip2">
                                                    <span class="tooltiptext2">Remover</span>
                                                    <a className='pull-right flipInX animated btn btn-sm' type='button' name='removerElementos' onClick={this.props.moverItemsLista}>{'<<'}</a>
                                                </div>
                                            </div>
                                            <div className='col col-xs-4'>
                                                <div className='form-group'>
                                                    <label>Columnas Seleccionadas</label>
                                                    <select
                                                        className='form-control'
                                                        multiple
                                                        name="listaColumnasDest"
                                                        id="listaColumnasDest"
                                                        onChange={this.props.handleChangeSelectList}>
                                                        {listaColumnasDest.map(crearOpcion)}
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                        <div className='row'>
                                            <div className='col'>
                                                <CajaTexto col="12" id="Etiqueta" type="text" value={Datos.Etiqueta.value} label="Etiqueta" attributes={{ readOnly: false, focus: false, hidden: "unset", }} onChangeInput={this.props.onChangeInputSelectedCol} />
                                            </div>
                                        </div>
                                        <div className='row'>
                                            <div className='col'>
                                                <CajaTexto col="6" id="Mascara" type="text" value={Datos.Mascara.value} label="Máscara" attributes={{ readOnly: false, focus: false, hidden: "unset", }} onChangeInput={this.props.onChangeInputMascara} />
                                            </div>
                                            <div className='col'>
                                                <ComboBox id="cmbAlinear" col="6" attributes={{ readOnly: false, focus: false, hidden: "unset", }} value={selectedOptionAlinear} label="Alinear" datos={listaAlinear} onChange={this.props.onhandleSelectAlinear} />
                                            </div>
                                        </div>
                                        <div className='row'>
                                            <div className='col'>
                                                <CajaTexto col="6" id="Largo" type="number" label='Largo' value={Datos.Largo.value} attributes={{ readOnly: false, focus: false, hidden: "unset", }} onChangeInput={this.props.onChangeInputLargo} />
                                            </div>
                                        </div>
                                    </Tab>
                                </Tabs>
                            </div>
                        </div>
                    </Modal.Body>
                    <Modal.Footer>
                        <Botones
                            botones={botonesModal}
                        />
                    </Modal.Footer>
                </Modal>
            </Fragment>
        );
    }
}