import * as React from 'react';
import { connect } from 'react-redux';
// model
import MapLayer from 'model/genesys/MapTileLayer';
// ui
import withStyles from '@material-ui/core/styles/withStyles';
import ExpandFiltersComponent from 'ui/common/filter/ExpandFiltersComponent';
import { Divider } from '@material-ui/core';
import MapLayerConfig from './MapLayerConfig';

/*tslint:disable*/
const styles = (theme) => ({
  root: {
    overflow: 'hidden' as 'hidden',
  },
  layersTitle: {
    'html[dir="ltr"] &' : {
      paddingLeft: '8px',
    },
    'html[dir="rtl"] &' : {
      paddingRight: '8px',
    },
    fontSize: '15px',
    fontWeight: 700,
    lineHeight: '40px',
    color: '#81807f',
    textTransform: 'uppercase' as 'uppercase',
  },
});

interface IMapConfigSectionProps extends React.ClassAttributes<any> {
  classes: any;
  mapLayers: MapLayer[];
}

class MapConfigSection extends React.Component<IMapConfigSectionProps> {

  public render() {
    const {classes, mapLayers} = this.props;
    return (
      <div className={ classes.root }>
        <ExpandFiltersComponent title="Configure map"/>
        <span className={ classes.layersTitle }>Layers</span>
        <Divider/>
        { mapLayers.map((layer, idx) => <MapLayerConfig key={ idx } layer={ layer }/>) }
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  mapLayers: state.accessions.public.mapLayers,
});


export default connect(mapStateToProps, null)(withStyles(styles)(MapConfigSection));