import React from 'react';
import { List, Map } from 'immutable';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';


const mockedStore = Map({
  trainingCourses: Map({
    trainingCoursesId1: Map({
      id: 'trainingCoursesId1',
      name: 'trainingCoursesId1',
      modules: List(['trainingCourse1ModuleId1', 'trainingCourse1ModuleId2', 'trainingCourse1ModuleId3']),
    }),
    trainingCoursesId2: Map({
      id: 'trainingCoursesId2',
      name: 'trainingCoursesId2',
      modules: List(['trainingCourse2ModuleId1']),
    }),
  }),
  modules: Map({
    trainingCourse1ModuleId1: Map({
      id: 'trainingCourse1ModuleId1',
    }),
    trainingCourse1ModuleId2: Map({
      id: 'trainingCourse1ModuleId2',
    }),
    trainingCourse1ModuleId3: Map({
      id: 'trainingCourse1ModuleId3',
    }),
    trainingCourse2ModuleId1: Map({
      id: 'trainingCourse1ModuleId3',
    }),
  }),
});

class TrainingCourses extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTrainingCourse: 'trainingCoursesId1',
      selectedTrainingCourseModule: 'selectedTrainingCourseModuleId1',
    };
  }

  selectTrainingCourse = (event) => {
    this.setState({ selectedTrainingCourse: event.target.value });
  };

  selectTrainingCourseModule = (event) => {
    this.setState({ selectedTrainingCourseModule: event.target.value });
  };

  render() {
    const trainingCourses = mockedStore.get('trainingCourses');
    const { selectedTrainingCourse, selectedTrainingCourseModule } = this.state;
    console.log(trainingCourses.getIn([selectedTrainingCourse, 'modules']));
    return (
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ flexBasis: '80%' }}>
          Тесты
        </div>
        <div style={{ flexBasis: '20%', display: 'flex', flexDirection: 'column' }}>
          Фильтры
          <FormControl>
            <InputLabel htmlFor="training-courses">Учебный курс</InputLabel>
            <Select
              value={selectedTrainingCourse}
              onChange={this.selectTrainingCourse}
              inputProps={{ name: 'training-course', id: 'training-courses' }}
              autoWidth
            >
              <MenuItem value="">
                <em>None</em>
              </MenuItem>
              {trainingCourses.map((trainingCourse) => (
                <MenuItem value={trainingCourse.get('id')}>
                  {trainingCourse.get('name')}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          {selectedTrainingCourse && (
            <FormControl>
              <InputLabel htmlFor="training-courses">Модуль</InputLabel>
              <Select
                value={selectedTrainingCourseModule}
                onChange={this.selectTrainingCourseModule}
                inputProps={{ name: 'training-course-module', id: 'training-course-modules' }}
                autoWidth
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                {trainingCourses.getIn([selectedTrainingCourse, 'modules']).map((trainingCourseModule) => (
                  <MenuItem value={trainingCourseModule}>
                    {trainingCourseModule}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          )}
        </div>
      </div>
    );
  }
}

export default TrainingCourses;