import {
  // Accordion,
  // AccordionDetails,
  // AccordionSummary,
  Avatar,
  Box,
  Button,
  Card,
  DialogActions,
  DialogContent,
  Divider,
  Grid2 as Grid,
  List,
  ListItem,
  Typography
} from "@mui/material";
// import { Close, ExpandMore } from "@material-ui/icons";
import { Close } from "@mui/icons-material";
import ResponsiveDialog from "common/ResponsiveDialog";
//import { useMobile } from "hooks";
import React, { useState } from "react";
import { ProductDetails } from "./UserFeatures";

interface Props {
  feature: ProductDetails;
  hasFeature: boolean;
  updateFeature: (add: boolean) => void;
}

export default function FeatureCard(props: Props) {
  const { feature, hasFeature, updateFeature } = props;
  const [openDialog, setOpenDialog] = useState(false);
  // const [currentQuestion, setCurrentQuestion] = useState(0);
  //const isMobile = useMobile()

  // const handleExpand = (index: number) => {
  //   setCurrentQuestion(index === currentQuestion ? 0 : index);
  // };

  const productDialog = () => {
    return (
      <ResponsiveDialog
        open={openDialog}
        onClose={() => {
          setOpenDialog(false);
        }}>
        <DialogActions style={{ padding: 0 }}>
          <img width="100%" alt={feature.featureName} src={feature.cardImage} />
          <Button
            onClick={() => {
              setOpenDialog(false);
            }}
            style={{ position: "absolute", top: "10px" }}>
            <Close />
          </Button>
        </DialogActions>
        <DialogContent style={{ padding: 8 }}>
          <List>
            <ListItem>
              <Grid
                container
                direction="row"
                alignItems="center"
                spacing={2}
                wrap="nowrap"
                justifyContent="space-between">
                <Grid>
                  <Avatar style={{ height: 40, width: 40 }}>{feature.featureLogo}</Avatar>
                </Grid>
                <Grid>
                  <Typography style={{ fontWeight: 650, fontSize: 15 }}>
                    {feature.featureTitle}
                  </Typography>
                </Grid>
                <Grid>
                  <Button
                    variant="contained"
                    onClick={() => {
                      updateFeature(!hasFeature);
                    }}>
                    {hasFeature ? "Deactivate" : "Activate"}
                  </Button>
                  <Typography style={{ fontWeight: 350, fontSize: 15 }}>
                    {feature.featureCost > 0 ? feature.featureCost : "Free"}
                  </Typography>
                </Grid>
              </Grid>
            </ListItem>
            {/* <Divider />
             <ListItem>
              Possibly put Screenshots Here
            </ListItem> */}
            <Divider />
            <ListItem>
              <Box>
                <Typography style={{ fontWeight: 350, fontSize: 13 }}>
                  {feature.longDescription}
                </Typography>
                {/* {feature.bulletPoints && (
                  <ul>
                    {feature.bulletPoints.map((b, i) => (
                      <li key={i} style={{ display: "list-item" }}>
                        <Typography style={{ fontWeight: 350, fontSize: 13 }}>{b}</Typography>
                      </li>
                    ))}
                  </ul>
                )} */}
              </Box>
            </ListItem>
            <Divider />
            <ListItem disableGutters>
              <Box style={{ width: "100%" }}>
                {/* {feature.questions.map((q, i) => (
                  <Accordion
                    key={i}
                    expanded={currentQuestion === i + 1}
                    onChange={() => handleExpand(i + 1)}>
                    <AccordionSummary expandIcon={<ExpandMore />}>
                      <Typography style={{ fontWeight: 650, fontSize: 13 }}>
                        {q.question}
                      </Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                      <Typography style={{ fontWeight: 350, fontSize: 13 }}>{q.answer}</Typography>
                    </AccordionDetails>
                  </Accordion>
                ))} */}
              </Box>
            </ListItem>
          </List>
        </DialogContent>
      </ResponsiveDialog>
    );
  };

  return (
    <React.Fragment>
      {productDialog()}
      <Card
        style={{ height: "100%", cursor: "pointer" }}
        onClick={() => {
          setOpenDialog(true);
        }}>
        <Box width="100%" alignItems="center" display="flex" justifyContent="center">
          <img width="100%" alt={feature.featureName} src={feature.cardImage} />
        </Box>
        <Grid
          style={{ padding: 10 }}
          container
          direction="row"
          alignItems="center"
          spacing={1}
          wrap="nowrap">
          <Grid>
            <Avatar style={{ height: 40, width: 40 }}>{feature.featureLogo}</Avatar>
          </Grid>
          <Grid>
            <Typography style={{ fontWeight: 650, fontSize: 17 }}>
              {feature.featureTitle}
            </Typography>
            <Typography style={{ fontWeight: 350, fontSize: 15 }}>
              {feature.featureCost > 0 ? feature.featureCost : "Free"}
            </Typography>
          </Grid>
        </Grid>
      </Card>
    </React.Fragment>
  );
}