import React from "react";
import { EuiBasicTable } from "@elastic/eui";
import EuiCustomLink from "./EuiCustomLink";
import { useParams } from "react-router-dom";
import { feast } from "../protos";

interface FeatureViewsListInterace {
  featureViews: feast.core.IFeatureViewProjection[];
}

interface IFeatureColumnInService {
  featureViewName: string;
  name: string;
  valueType: feast.types.ValueType.Enum;
}

const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
  const { projectName } = useParams();
  const items: IFeatureColumnInService[] = featureViews.flatMap(featureView => featureView.featureColumns!.map(featureColumn => ({
    featureViewName: featureView.featureViewName!,
    name: featureColumn.name!,
    valueType: featureColumn.valueType!,
  })));

  const columns = [
    {
      name: "Feature View",
      field: "featureViewName",
      render: (name: string) => {
        return (
          <EuiCustomLink
            href={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
            to={`${process.env.PUBLIC_URL || ""}/p/${projectName}/feature-view/${name}`}
          >
            {name}
          </EuiCustomLink>
        );
      },
    },
    {
      name: "Feature Column",
      field: "name",
    },
    {
      name: "Value Type",
      field: "valueType",
      render: (valueType: feast.types.ValueType.Enum) => {
        return feast.types.ValueType.Enum[valueType];
      },
    },
  ];

  const getRowProps = (item: IFeatureColumnInService) => {
    return {
      "data-test-subj": `row-${item.featureViewName}`,
    };
  };

  return (
    <EuiBasicTable columns={columns} items={items} rowProps={getRowProps} />
  );
};

export default FeaturesInServiceList;
