frontend/src/userFeatures/UserFeatures.tsx

import { Box, Grid2 as Grid } from "@mui/material";

import { useGlobalState } from "providers";
import { useSnackbar, useUserAPI } from "hooks";
import React, { useEffect, useState } from "react";
import JohnDeereIcon from "products/CommonIcons/johnDeereIcon";
import CNHiIcon from "products/CommonIcons/cnhiIcon";
//import AgLogo from "assets/whitelabels/AdaptiveAgriculture/AGLogoSquare.png";
import {
  IsAdaptiveAgriculture
  // IsAdCon,
  // IsMiVent,
  // IsOmniAir
} from "services/whiteLabel";
import FeatureCard from "./FeatureCard";
//import { ImgIcon } from "common/ImgIcon";
//images to import for the image in the card for the feature make sure to have a 2:1 aspect ratio to keep the cards symmetrical
import FeatureImageTest from "assets/marketplaceImages/VisualFarmMPImage.png";

// export interface FAQ {
//   question: string;
//   answer: string;
// }

export interface ProductDetails {
  featureName: string; //string matching the entry in the features array found in Users.tsx
  featureTitle: string; //title of feature to display to user
  featureCost: number;
  cardImage: string; //image to display on the feature card
  featureLogo: JSX.Element; //image to display in the logo section of the card and product dialog
  //galleryImages: string[] //screenshots to show the feature in action
  longDescription: string; //a longer description of the feature to show in the dialog
  // bulletPoints?: string[];
  // questions: FAQ[];
  hidden?: boolean; //if the feature is not quite ready for the public ie in testing, if a user has the beta flag they will see these hidden features
}

const agFeatureList: ProductDetails[] = [
  {
    featureName: "john-deere",
    featureLogo: <JohnDeereIcon />,
    featureCost: 0,
    cardImage: FeatureImageTest,
    featureTitle: "John Deere Operations Center",
    longDescription:
      "Integrate with the John Deere Operations Center to bring your data into our platform"
    // bulletPoints: ["bullet one", "bullet two"],
    // questions: [
    //   { question: "question 1", answer: "answer 1" },
    //   { question: "question 2", answer: "answer 2" }
    // ]
  },
  {
    featureName: "cnhi",
    featureLogo: <CNHiIcon />,
    featureCost: 0,
    cardImage: FeatureImageTest,
    featureTitle: "Case New Holland Industrial Center",
    longDescription:
      "Integrate with the Case New Holland Industrial Center to bring your data into our platform"
    // bulletPoints: ["bullet one", "bullet two"],
    // questions: [],
  }
];

// const constructionFeatureList: ProductDetails[] = []

// const aviationFeatureList: ProductDetails[] = []

// const miningFeatureList: ProductDetails[] = []

// const universalFeatureList: ProductDetails[] = []

export default function Marketplace() {
  const [{ user }, dispatch] = useGlobalState();
  const userAPI = useUserAPI();
  const [userFeatures, setUserFeatures] = useState<string[]>([]);
  const [featureList, setFeaturList] = useState<ProductDetails[]>([]);
  const { error, success } = useSnackbar();

  useEffect(() => {
    let list: ProductDetails[] = [];
    if (IsAdaptiveAgriculture()) {
      list = list.concat(agFeatureList);
    }
    //   if(IsAdCon()){
    //     list = list.concat(constructionFeatureList)
    //   }
    //   if(IsOmniAir()){
    //     list = list.concat(aviationFeatureList)
    //   }
    //   if(IsMiVent()){
    //       list = list.concat(miningFeatureList)
    //   }
    //   list = list.concat(universalFeatureList)
    setFeaturList(list);
  }, []);

  useEffect(() => {
    setUserFeatures(user.settings.features);
  }, [user]);

  const updateUser = (feature: string, added: boolean) => {
    if (added) {
      user.settings.features.push(feature);
    } else {
      user.settings.features = user.settings.features.filter(v => v !== feature);
    }
    setUserFeatures([...user.settings.features]);
    userAPI
      .updateUser(user.id(), user.protobuf())
      .then(resp => {
        success("Updated " + feature + " feature");
        dispatch({ key: "user", value: user });
      })
      .catch(err => {
        error("Failed to update " + feature + " feature");
      });
  };

  return (
    <Box padding={2}>
      <Grid container spacing={3} justifyContent="space-between" alignItems="center" alignContent="center">
        {featureList.map(feat => {
          if (!feat.hidden || user.hasFeature("beta")) {
            return (
              <Grid key={feat.featureName} size={{ xs:12, sm:6, md:4, lg:4}}>
                <FeatureCard
                  feature={feat}
                  updateFeature={checked => {
                    updateUser(feat.featureName, checked);
                  }}
                  hasFeature={userFeatures.includes(feat.featureName)}
                />
              </Grid>
            );
          }
          return null;
        })}
      </Grid>
    </Box>
  );
}