import React from 'react'
import ProfilePicture from '../Images/man.png';
import { Row, Col, Button } from 'react-bootstrap'

export function Configuracion() {

    let [ filename, setFilename ] = React.useState('');
    const hiddenFileInput = React.useRef(null);

    return (
        <div className="content-section">
            <div className="main">
                <h1 className="breadcrumb-header">Configuraciones</h1>
                <Row>
                    <Col md="12">
                        <div className="panel">

                            <Row style={{ padding : 25 }} className="row">
                                <Col md="4">
                                    <div className="img-container">
                                        <img src={ProfilePicture} alt='profile ' />
                                    </div>
                                </Col>
                                <Col md="8">

                                    <input 
                                        value={filename} 
                                        type="text" 
                                        className="file-upload-input" 
                                        disabled="" 
                                        placeholder="Ningún archivo seleccionado" readOnly
                                    />

                                    <Button className="btn_add_producto_confirm" style={{ marginLeft : 15 }}>
                                        SUBIR FOTO
                                    </Button>

                                    <input
                                        multiple={false}
                                        type="file"
                                        ref={hiddenFileInput}
                                        onChange={(event) => {
                                            const files = event.target.files;
                                            console.log('files crud ', files[0])
                                            setFilename(files[0])
                                        }}
                                        style={{display: 'none'}}
                                    />

                                

                                </Col>
                            </Row>

                            <Row className="row">
                                <Col md="6">
                                    <div className="inputs_config">
                                        <p>Datos personales</p>
                                        <label>Nombre</label>
                                        <input type="text" name="nombre_user" placeholder="Fernando Vásquez"/>
                                        <label>Puesto / Profesión</label>
                                        <input type="text" name="puesto" placeholder="Gerente general"/>
                                        <label>Dirección</label>
                                        <input type="text" name="direccion" placeholder="Melbourn, Australia"/>
                                        <label>Número</label>
                                        <input type="number" name="numero" placeholder="12345678"/>
                                    </div>
                                </Col>
                                <Col md="6">
                                    <div className="inputs_config">
                                        <p>Redes sociales</p>
                                        <label>Facebook</label>
                                        <input type="text" name="facebook" placeholder="Link de Facebook"/>
                                        <label>Linkein</label>
                                        <input type="text" name="linkedin" placeholder="Link de Linkedin"/>
                                        <label>Instagram</label>
                                        <input type="text" name="instagram" placeholder="Link de Instagram"/>
                                        <label>Correo</label>
                                        <input type="email" name="instagram" placeholder="Correo electrónico"/>
                                    </div>
                                </Col>
                            </Row>

                            <Row>
                                <Col md='12'>
                                    <div className="boton_guardar_info">
                                        <div className="success_btn">
                                            <span >Guardar</span>
                                        </div>
                                    </div>
                                </Col>
                            </Row>

                        </div>
                    </Col>
                </Row>
            </div>
        </div>
    )

}