import {

EuiFlexGroup,

EuiHorizontalRule,

EuiLoadingSpinner,

EuiTitle,

EuiPanel,

EuiFlexItem,

EuiSpacer,

EuiDescriptionList,

EuiDescriptionListTitle,

EuiDescriptionListDescription,

} from "@elastic/eui";

import React from "react";

import { useParams } from "react-router-dom";

import DatasetFeaturesTable from "./DatasetFeaturesTable";

import DatasetJoinKeysTable from "./DatasetJoinKeysTable";

import useLoadDataset from "./useLoadDataset";

import { toDate } from "../../utils/timestamp";

const EntityOverviewTab = () => {

let { datasetName } = useParams();

if (!datasetName) {

throw new Error(

"Route doesn't have a 'datasetName' part. This route is likely rendering the wrong component.",

);

}

const { isLoading, isSuccess, isError, data } = useLoadDataset(datasetName);

const isEmpty = data === undefined;

return (

<React.Fragment>

{isLoading && (

<React.Fragment>

<EuiLoadingSpinner size="m" /> Loading

</React.Fragment>

)}

{isEmpty && <p>No dataset with name: {datasetName}</p>}

{isError && <p>Error loading dataset: {datasetName}</p>}

{isSuccess && data && (

<React.Fragment>

<EuiFlexGroup>

<EuiFlexItem grow={2}>

<EuiPanel hasBorder={true}>

<EuiTitle size="xs">

<h2>Features</h2>

</EuiTitle>

<EuiHorizontalRule margin="xs" />

<DatasetFeaturesTable

features={

data.spec?.features!.map((joinedName: string) => {

const [featureViewName, featureName] =

joinedName.split(":");

return {

featureViewName,

featureName,

};

})!

}

/>

</EuiPanel>

<EuiSpacer size="m" />

<EuiPanel hasBorder={true}>

<EuiTitle size="xs">

<h2>Join Keys</h2>

</EuiTitle>

<EuiHorizontalRule margin="xs" />

<DatasetJoinKeysTable

joinKeys={

data?.spec?.joinKeys!.map((joinKey) => {

return { name: joinKey };

})!

}

/>

</EuiPanel>

</EuiFlexItem>

<EuiFlexItem grow={1}>

<EuiPanel hasBorder={true} grow={false}>

<EuiTitle size="xs">

<h3>Properties</h3>

</EuiTitle>

<EuiHorizontalRule margin="xs" />

<EuiDescriptionList>

<EuiDescriptionListTitle>

Source Feature Service

</EuiDescriptionListTitle>

<EuiDescriptionListDescription>

{data?.spec?.featureServiceName!}

</EuiDescriptionListDescription>

</EuiDescriptionList>

</EuiPanel>

<EuiSpacer size="m" />

<EuiPanel hasBorder={true} grow={false}>

<EuiDescriptionList>

<EuiDescriptionListTitle>Created</EuiDescriptionListTitle>

<EuiDescriptionListDescription>

{toDate(data?.meta?.createdTimestamp!).toLocaleDateString(

"en-CA",

)}

</EuiDescriptionListDescription>

</EuiDescriptionList>

</EuiPanel>

</EuiFlexItem>

</EuiFlexGroup>

</React.Fragment>

)}

</React.Fragment>

);

};

export default EntityOverviewTab;