import React from 'react';
import ReactDOM from 'react-dom';
import { connect, Provider } from 'react-redux';
import { createStore } from 'redux';
import PropTypes from 'prop-types';

const defaultState = {
  type: 'company',
  name: 'безымянный',
  caption: '',
  logo: '???',
};

const store = createStore((state = defaultState) => state);

const BookletTypes = [
    { type: 'Company', name: 'Профайл компании'},
    { type: 'text', name: 'Текстовый буклет', disabled: true }
];

const BookletType = ({ onChange, type }) => (

    <h1>Тип:
        <select value={type} name="booklet-type" className="form-select" onChange={onChange}>
            {BookletTypes.map((bt) => (

                <option key={bt.type} value={bt.type} disabled={bt.disabled}>{bt.name}</option>
            ))
            }
        </select>
    </h1>
);

const BookletForm = ({ onTypeChange, type }) => (
  <BookletType onChange={onTypeChange} type={type}>
  <span>Лого: </span><input required name="company-logo" form="send-booklet" class="form-control" type="file" accept="image/*"/>
);

const mapDispatchToProps = (dispatch) => {

    return {
        onTypeChange: (type) => {

            dispatch({ newTypeChosen: type });
        }
    };
};

const mapStateToProps = (state) => {

    return { type: state.type };
};


const VisibileBookletForm = connect(
    mapStateToProps,
    mapDispatchToProps
)(BookletForm);

ReactDOM.render(
    <Provider store={store}>
      <VisibileBookletForm/>
    </Provider>,
    document.getElementById('root')
);

BookletType.propTypes = {
    onChange: PropTypes.func.isRequired
};


/*
ERROR in ./static/create-booklet.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ilyaigpetrov/Repos/slog.foobar/static/create-booklet.js: Unex
pected token (41:4)

  39 | const mapDispatchToProps = (dispatch) => {
  40 |
> 41 |     return {
     |     ^
  42 |         onTypeChange: (type) => {
  43 |
  44 |             dispatch({ newTypeChosen: type });
    at _class.raise (/home/ilyaigpetrov/Repos/slog.foobar/node_modules/@babel/pa
rser/lib/index.js:3893:15)


*/