MapMenu.js

import React, { useState } from 'react';

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';

import Grid from '@material-ui/core/Grid';
import Switch from '@material-ui/core/Switch';
import {
  IconWrapper,
  useStyles,
  MapMenuCard,
  IconContainer,
  MenuContainer,
  LegendContainer,
  DropdownContainer,
} from './MapMenuStyles';
import GrayBus from './BusImages/bus-gray.png';
import OrangeBus from './BusImages/bus-orange.png';
import GreenBus from './BusImages/bus-green.png';
import BlueBus from './BusImages/bus-blue.png';

import DropdownClearableMultiple from '../../DropDowns/MultiDropDown/MultiDropdown';

const AntSwitch = withStyles((theme) => ({
  root: {
    width: 28,
    height: 16,
    padding: 0,
    display: 'flex',
  },
  switchBase: {
    padding: 2,
    color: theme.palette.grey[500],
    '&$checked': {
      transform: 'translateX(12px)',
      color: theme.palette.common.white,
      '& + $track': {
        opacity: 1,
        backgroundColor: theme.palette.primary.main,
        borderColor: theme.palette.primary.main,
      },
    },
  },
  thumb: {
    width: 12,
    height: 12,
    boxShadow: 'none',
  },
  track: {
    border: `1px solid ${theme.palette.grey[500]}`,
    borderRadius: 16 / 2,
    opacity: 1,
    backgroundColor: theme.palette.common.white,
  },
  checked: {},
}))(Switch);

export const MapMenu = () => {
  const classes = useStyles();

  const [dropdownValue, setDropdownValue] = useState('');

  const callback = (inputValue) => {
    setDropdownValue(inputValue);
  };

  // console.log('======= dropdownValue:', dropdownValue);

  const cityOptions = [
    {
      key: 'helsinki',
      value: 'helsinki',
      text: 'Helsinki',
    },
    {
      key: 'tallinn',
      value: 'tallinn',
      text: 'Tallinn',
    },
  ];

  const HelsinkiDefinedOperators = [
    {
      key: 6,
      value: 'OyPohjolanLiikenne Ab',
      text: 'OyPohjolanLiikenne Ab',
    },
    {
      key: 12,
      value: 'HelsinginBussiliikenneOy',
      text: 'Helsingin Bussiliikenne Oy',
    },
    {
      key: 17,
      value: 'TammelundinLiikenneOy',
      text: 'Tammelundin Liikenne Oy',
    },
    {
      key: 18,
      value: 'PohjolanKaupunkiliikenneOy',
      text: 'Pohjolan Kaupunkiliikenne Oy',
    },
    {
      key: 20,
      value: 'BusTravelÅberginLinjaOy',
      text: 'Bus Travel Åbergin Linja Oy',
    },
    {
      key: 21,
      value: 'BusTravelOyReissuRuoti',
      text: 'Bus Travel Oy Reissu Ruoti',
    },
    {
      key: 22,
      value: 'NobinaFinlandOy',
      text: 'Nobina Finland Oy',
    },
    {
      key: 30,
      value: 'SavonlinjaOy',
      text: 'Savonlinja Oy',
    },
    {
      key: 36,
      value: 'NurmijärvenLinjaOy',
      text: 'Nurmijärven Linja Oy',
    },
    {
      key: 40,
      value: 'HKLRaitioliikenne',
      text: 'HKL-Raitioliikenne',
    },
    {
      key: 45,
      value: 'TransdevVantaaOy',
      text: 'Transdev Vantaa Oy',
    },
    {
      key: 47,
      value: 'TaksikuljetusOy',
      text: 'Taksikuljetus Oy',
    },
    {
      key: 50,
      value: 'HKLMetroliikenne',
      text: 'HKL-Metroliikenne',
    },
    {
      key: 51,
      value: 'KorsisaariOy',
      text: 'Korsisaari Oy',
    },
    {
      key: 54,
      value: 'VSBussipalvelutOy',
      text: 'V-S Bussipalvelut Oy',
    },
    {
      key: 55,
      value: 'TransdevHelsinkiOy',
      text: 'Transdev Helsinki Oy',
    },
    {
      key: 58,
      value: 'KoillisenLiikennepalvelutOy',
      text: 'Koillisen Liikennepalvelut Oy',
    },
    {
      key: 59,
      value: 'TilausliikenneNikkanenOy',
      text: 'Tilausliikenne Nikkanen Oy',
    },
    {
      key: 89,
      value: 'Metropolia',
      text: 'Metropolia',
    },
    { key: 90, value: 'VR Oy', text: 'VR Oy' },
  ];

  const [checkboxState, setCheckboxState] = useState({
    checkedVisible: true,
  });

  const handleChange = (event) => {
    setCheckboxState({
      ...checkboxState,
      [event.target.name]: event.target.checked,
    });
  };

  const tableStyles = makeStyles({
    table: {
      minWidth: 150,
    },
  });

  const createData = (key, operator) => ({ key, operator });

  // console.log('HelsinkiDefinedOperators', HelsinkiDefinedOperators);

  const operators = [];
  HelsinkiDefinedOperators.forEach((operator, idx) => {
    operators.push(createData(operator.key, operator.text));
  });

  // console.log('operators====', operators);

  const DenseTable = () => {
    const tableClasses = tableStyles();

    return (
      <TableContainer component={Paper}>
        <Table
          stickyHeader
          className={tableClasses.table}
          size="small"
          aria-label="a dense table"
        >
          <TableHead>
            <TableRow>
              <TableCell>Operator</TableCell>
              {/* <TableCell align="right">Listed</TableCell> */}
              <TableCell>Visible</TableCell>
              <TableCell align="right">Total Placements</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {operators.map((row) => (
              <TableRow key={row.key}>
                <TableCell component="th" scope="row">
                  {row.operator}
                </TableCell>
                <TableCell>
                  <Typography component="div">
                    <Grid
                      component="label"
                      container
                      alignItems="center"
                      // justify="flex-end"
                      spacing={1}
                    >
                      <Grid item>Off</Grid>
                      <Grid item>
                        <AntSwitch
                          checked={checkboxState.checkedC}
                          onChange={handleChange}
                          name="checkedC"
                        />
                      </Grid>
                      <Grid item>On</Grid>
                    </Grid>
                  </Typography>
                </TableCell>
                <TableCell align="right">{'<<Placement value>>'}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    );
  };

  // TODO: change to real user roles
  const userRole = 'admin';
  // const userRole = 'sales';

  return (
    <MapMenuCard>
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
        >
          Live Preview
        </Typography>
      </CardContent>
      <MenuContainer>
        <LegendContainer>
          <IconContainer>
            <IconWrapper>
              <Avatar
                alt="Blue Bus Icon"
                src={BlueBus}
                className={classes.iconLarge}
              />
              <h6>Without Placements</h6>
            </IconWrapper>
            <IconWrapper>
              <Avatar
                alt="Green Bus Icon"
                src={GreenBus}
                className={classes.iconLarge}
              />
              <h6>With Placements</h6>
            </IconWrapper>
            <IconWrapper>
              <Avatar
                alt="Orange Bus Icon"
                src={OrangeBus}
                className={classes.iconLarge}
              />
              <h6>Selected/Related</h6>
            </IconWrapper>
            {/* <IconWrapper>
              <Avatar
                alt="Gray Bus Icon"
                src={GrayBus}
                className={classes.iconLarge}
              />
              <h6>Unlisted from app</h6>
            </IconWrapper> */}
          </IconContainer>
          <DropdownContainer>
            <DropdownClearableMultiple
              parentCallback={callback}
              placeholder="City"
              options={cityOptions}
            />
            <DropdownClearableMultiple
              parentCallback={callback}
              placeholder="Operator"
              options={HelsinkiDefinedOperators}
            />
          </DropdownContainer>
        </LegendContainer>

        {userRole === 'admin' && <DenseTable />}
      </MenuContainer>
    </MapMenuCard>
  );
};