import React, {Component} from 'react'
import { Form } from 'semantic-ui-react'
import { loadOffice, loadAllUsers } from '../AC'
import {connect} from 'react-redux'
import {mapToArr} from "../helpers";

class FormEditOffice extends Component {
    componentDidMount() {
        const {loadOffice, id, loadAllUsers} = this.props;
        loadAllUsers();
        loadOffice(id);
    }

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

    handleSubmit = (ev) => {
        ev.preventDefault();
        console.log('STATE', this.state);
    };

    state = {
        responsibles: []
    };

    render() {
        const {office, users} = this.props;
        if (!office || !users) return null;

        const {responsibles} = this.state;
        const userOptions = mapToArr(users).map((user) => {
            return {
                key: user.id,
                value: user.id,
                text: user.username
            }
        });

        return (
            <Form onSubmit={this.handleSubmit}>
                <Form.Group widths='equal'>
                    <Form.Input fluid label='Название' placeholder={office.name} readOnly/>
                </Form.Group>
                <Form.Group widths='equal'>
                    <Form.Dropdown label='Ответственные'
                                   name='responsibles'
                                   value={responsibles}
                                   fluid multiple search selection
                                   options={userOptions}
                                   onChange={this.handleChange}/>
                </Form.Group>
                <Form.Button content='Сохранить' />
            </Form>
        )
    }
}

export default connect((state, ownProps) => {
    return {
        office: state.offices.entities.get(ownProps.id),
        users: state.users.entities,
    }
}, {loadOffice, loadAllUsers})(FormEditOffice)