import React from "react";
import { usePipelineMappings } from "@qltr/queries";
import Button from "@mui/material/Button";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";

function PipelineSelector(props) {
  const { cache, setCache, cancel, next } = props;
  const { isLoading, data: pipelineMappings } = usePipelineMappings();

  const primaryMappings = () => {
    if (isLoading) return {};
    const primaryMappings = {};
    for (var pm of pipelineMappings) {
      if (!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
      primaryMappings[pm[0]].push(pm);
    }
    return primaryMappings;
  };

  const selectPrimary = (primarySelectedMappings) => () => {
    setCache({ primarySelectedMappings });
  };

  const clickNext = () => {
    if (!cache.primarySelectedMappings)
      return console.log("No mapping selected");
    next();
  };

  return (
    <React.Fragment>
      <DialogContent>
        {Object.keys(primaryMappings()).map((k, i) => (
          <Accordion
            expanded={false}
            disableGutters={true}
            square
            key={i}
            onClick={selectPrimary(primaryMappings()[k])}
          >
            <AccordionSummary
              style={{
                backgroundColor: "rgba(0, 0, 0, .03)",
                flexWrap: "wrap",
              }}
            >
              <Typography
                component={"span"}
                style={{ wordBreak: "break-word", margin: "auto 0" }}
                color={
                  (cache.primarySelectedMappings ?? [[]])[0][0] === k
                    ? "primary"
                    : null
                }
              >
                {k}
              </Typography>
              <Stack sx={{ ml: "auto" }}>
                {(primaryMappings[k] ?? []).length}
              </Stack>
            </AccordionSummary>
          </Accordion>
        ))}
      </DialogContent>
      <DialogActions>
        <Button onClick={cancel}>Cancel</Button>
        <Button onClick={clickNext} autoFocus>
          Next
        </Button>
      </DialogActions>
    </React.Fragment>
  );
}
export default PipelineSelector;

/*
    Server -> pipeMappings
    [["primary", "secondary1", "tertiary1"], ["primary", "secondary2", "tertiary3"]]
    */
/*
    const primaryMappings = pipeMappings.filter((m)=>m[0] === "primary"); // Select Page

  const displayTracks = [];
    // Track Select Page
    for(var pm of primaryMappings){
      for(var i=0;i<pm.length;i++){
        if(!displayTracks[i]) displayTracks[i] = [];
        if(!displayTracks[i].includes(pm[i])) continue;
        
        displayTracks[i].push(pm[i]);
      }
    }
    
    primaryMappings.forEach((pm)=>{
    
    })
    */
/* Cache:
    {
    testTree: [["primary"],["secondary1", "secondary2"], ["tertiary1", "tertiary3"]]
    }
    */
/*
    tracks: [["primary", "secondary1", "tertiary1"], ["primary", "secondary2", "tertiary3"]]
    */
/**/
