import { React, useState } from 'react';

import {
  ChakraProvider,
  Box,
  Text,
  Link,
  VStack,
  Code,
  Grid,
  theme,
  Select,
  Card,
  CardHeader,
  Heading,
  CardBody,
  Center,
} from '@chakra-ui/react';
import { ColorModeSwitcher } from './ColorModeSwitcher';
import { flatData } from './Data';

function App() {
  const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]);
  const [flatOptions, setFlatOptions] = useState([]);
  const [selectedBuilding, setSelectedBuilding] = useState();

  function buildingSelected(e) {
    var newOptions;
    if (e.target.value === "south") {
      newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }];
    } else {
      newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }];
    }
    setLevelOption(newOptions);
    setSelectedBuilding(e.target.value);
  };


  function levelSelected(e) {
    var newData = flatData[selectedBuilding][e.target.value];
    if (newData) {
      setFlatOptions(flatData[selectedBuilding][e.target.value]);
    }
  }
  return (

    <ChakraProvider theme={theme}>
      <Center>
        <Card>
          <CardHeader>
            <Heading size='md'>Wohnungsauswahl</Heading>
          </CardHeader>
          <CardBody>
            <Text>View a summary of all your customers over the last month.</Text>
            <Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
              <option value='north'>Nordbau</option>
              <option value='south'>Südbau</option>
            </Select>
            <Select placeholder='Etage auswählen' onChange={levelSelected}>
              {levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
            </Select>
            <Select placeholder='Wohnung auswählen'>
              {flatOptions.map((flat) => <option value={flat} >{flat.print()}</option>)}
            </Select>
          </CardBody>
        </Card>
      </Center>
    </ChakraProvider >
  );
}

export default App;