import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
import { makeStyles, withStyles } from '@material-ui/core';

export const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
  logo: {
    textDecoration: 'none',
    color: theme.palette.text.primary,
  },
  menuItem: {
    paddingLeft: theme.spacing(3),
    paddingRight: theme.spacing(3),
  },
  asessment: {
    padding: theme.spacing(3, 2),
    textAlign: 'center',
  },
  appBar: {
    position: 'relative',
  },
  layout: {
    width: 'auto',
    marginLeft: theme.spacing(2),
    marginRight: theme.spacing(2),
    [theme.breakpoints.up(800 + theme.spacing(4))]: {
      width: 800,
      marginLeft: 'auto',
      marginRight: 'auto',
    },
  },
  paper: {
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(3),
    padding: theme.spacing(2),
    [theme.breakpoints.up(600 + theme.spacing(6))]: {
      marginTop: theme.spacing(6),
      marginBottom: theme.spacing(6),
      padding: theme.spacing(3),
    },
  },
  stepper: {
    padding: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px`,
  },
  buttons: {
    display: 'flex',
    justifyContent: 'flex-end',
  },
  button: {
    marginTop: theme.spacing(3),
    marginLeft: theme.spacing(1),
  },
  stepLabels: {
    cursor: 'pointer',
  },
  checklistSummary: {
    display: 'flex',
    width: '100%',
    justifyContent: 'space-between',
  },
  checklistQuestion: {
    alignSelf: 'start',
    paddingTop: '14px',
  },
  checkboxIcon: {
    alignSelf: 'baseline',
    paddingTop: '14px',
  },
  questionIcon: {
    paddingRight: '10px',
  },
  toolsWrapper: {
    display: 'flex',
  },
  toolChip: {
    margin: '5px',
  },
  column: {
    width: '100%',
  },
  answeredQuestionsChip: {
    backgroundColor: '#d1f9d0',
    border: 'none',
    color: '#657764',
  },
}));

export const ExpansionPanelSummary = withStyles({
  root: {
    borderBottom: '1px solid rgba(0, 0, 0, .125)',
    minHeight: 56,
    '&$expanded': {
      minHeight: 56,
      boxShadow: '1px 3px 3px rgba(0, 0, 0, 0.2)',
    },
  },
  content: {
    '&$expanded': {
      margin: '12px 0',
      boxShadow: 'none',
    },
  },
  expanded: {},
})(MuiExpansionPanelSummary);

export const ExpansionPanel = withStyles({
  root: {
    border: 'none',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiExpansionPanel);

export const ExpansionPanelDetails = withStyles(theme => ({
  root: {
    padding: theme.spacing(2),
    backgroundColor: '#f5f9fe',
  },
}))(MuiExpansionPanelDetails);