import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container, Form } from '@redux-devtools/ui';
import { listSchemes, listThemes } from '@redux-devtools/ui';
import { changeTheme } from '../../actions';
export class Themes extends Component {
  render() {
    const theme = this.props.theme;
    const formData = {
      theme: theme.theme,
      scheme: theme.scheme,
      colorPreference: theme.colorPreference
    };
    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Form, {
      schema: {
        type: 'object',
        properties: {
          theme: {
            type: 'string',
            enum: listThemes()
          },
          scheme: {
            title: 'color scheme',
            type: 'string',
            enum: listSchemes()
          },
          colorPreference: {
            title: 'theme color',
            type: 'string',
            enum: ['auto', 'light', 'dark']
          }
        }
      },
      formData: formData,
      noSubmit: true,
      onChange: this.props.changeTheme
    }));
  }
}
const mapStateToProps = state => ({
  theme: state.theme
});
const actionCreators = {
  changeTheme
};
export default connect(mapStateToProps, actionCreators)(Themes);