import React from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid'
import ButtonSave from '../ButtonSave';
import FaceIcon from '@material-ui/icons/Face';
import DoneIcon from '@material-ui/icons/Done';
import DashboardAddToCarDialog from './DashboardAddToCarDialog';
import { uiStore } from '@/store/UIStore';
import DialogPopout from '../DialogPopout'

let testowa = uiStore.testowa
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
      backgroundColor: "#2f2f2f",
    },
    heading: {
      fontSize: theme.typography.pxToRem(15),
    },
    secondaryHeading: {
      fontSize: theme.typography.pxToRem(15),
      color: theme.palette.text.secondary,
    },
    icon: {
      verticalAlign: 'bottom',
      height: 20,
      width: 20,
    },
    details: {
      alignItems: 'center',
    },
    column: {
      flexBasis: '20%',
    },
    columnlast: {
        flexBasis: '40%'
    },
    helper: {
      borderLeft: `2px solid ${theme.palette.divider}`,
      padding: theme.spacing(1, 2),
    },
    link: {
      color: theme.palette.primary.main,
      textDecoration: 'none',
      '&:hover': {
        textDecoration: 'underline',
      },
    },
    moved: {
        marginLeft: "20px"
    },
    movedmore: {
        marginLeft: "60px"
    },
    userchip: {
        margin: "4px",
        float: "left",
        width: "200px",
    }
  }),
);




export default function DetailedExpansionPanel() {
  const classes = useStyles();
  interface ChipData {
    id: number;
    nickname: string;
  }

  function RenderCoownersChips(props) {
    const [chipData, setChipData] = React.useState<ChipData[]>(props.data[0]);
    uiStore.vehicles[props.data[1]].coowners = chipData

    const handleDelete = (chipToDelete: ChipData) => () => {
      setChipData(chips => chips.filter(chip => chip.id !== chipToDelete.id));
    };

    return (
      <div className={classes.root}>
        {chipData.map(data => {
          return (
            <Chip
              key={data.id}
              icon={<FaceIcon />}
              label={data.nickname}
              onDelete={handleDelete(data)}
              className={classes.userchip}
              variant="outlined"
            />
          );
        })}
      </div>
    );
  }

  function RenderUsersChips(props) {
    const [chipData, setChipData] = React.useState<ChipData[]>(props.data[0]);
    uiStore.vehicles[props.data[1]].users = chipData

    const handleDelete = (chipToDelete: ChipData) => () => {
      setChipData(chips => chips.filter(chip => chip.id !== chipToDelete.id));
    };

    return (
      <div className={classes.root}>
        {chipData.map(data => {
          return (
            <Chip
              key={data.id}
              icon={<FaceIcon />}
              label={data.nickname}
              onDelete={handleDelete(data)}
              className={classes.userchip}
              variant="outlined"
            />
          );
        })}
      </div>
    );
  }

  class RenderVehicles extends React.Component {
    render() {

      let vehicleComponent = uiStore.vehicles.map((veh:any) => {
        return (
        <div>
        <ExpansionPanel key={veh.vid} defaultExpanded style={{borderRadius: "5px"}}>
        <ExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1c-content"
          id="panel1c-header"
          style={{borderBottom: "1px solid #5e5e5e"}}
        >
          <div className={classes.column}>
            <Typography className={classes.heading}>
                <p className={classes.moved}>
                    <strong>{veh.name}</strong>
                </p>
            </Typography>
          </div>
          <div className={classes.columnlast}>
            <Typography className={classes.secondaryHeading}>
                <p className={classes.moved}>
                    <strong>Właściciel pojazdu</strong>
                    <span style={{color: "#6f6f6f"}}> (opcja Prime)</span>
                </p>
            </Typography>
          </div>
          <div className={classes.columnlast}>
            <Typography className={classes.secondaryHeading}>
                <p className={classes.movedmore}>
                <strong>Użytkownicy</strong>
                <span style={{color: "#6f6f6f"}}> (opcja Premium)</span>
                </p>
            </Typography>
          </div> <br/>
        </ExpansionPanelSummary>

        <ExpansionPanelDetails className={classes.details}>
          <div className={classes.column}>
            <Chip label="ID" style={{ backgroundColor: "#1c1c1c", margin: "4px", width: "80px", border: "2px solid #787878"}}/>
            <Chip label={veh.vid} style={{margin: "4px", width: "80px", border: "2px solid #787878"}}/> <br/>
            <Chip label="Stan" style={{ backgroundColor: "#1c1c1c", margin: "4px", width: "80px", border: "2px solid #787878"}}/>
            <Chip label={veh.condition + "%"} style={{width: "80px", margin: "4px", border: "2px solid #787878"}}/>
          </div >
          <div className={clsx(classes.columnlast, classes.helper)}>
            <Grid>
                <Chip
                icon={<FaceIcon />}
                label={veh.owner.nickname}
                style={{padding: "0px 10px 0px 10px", backgroundColor: "orange", border: "2px solid #ffb734"}}
                className={classes.userchip}
                />
                <RenderCoownersChips data={[veh.coowners, veh.key]} />
            </Grid>
          </div>
          <div className={clsx(classes.columnlast, classes.helper)}>
            <Typography variant="caption">
                <Grid>
                    <RenderUsersChips data={[veh.users, veh.key]} />
                </Grid>
            </Typography>
          </div>
        </ExpansionPanelDetails>

        <Divider />
        <ExpansionPanelActions>
          <DialogPopout data={[veh.vid, veh.name]}/>
        </ExpansionPanelActions>
      </ExpansionPanel>
      </div>
        )
      })
      return vehicleComponent
    }
  }
  return (
    <div className={classes.root}>
      <RenderVehicles />
    </div>
  );
}