import Metrics, { MetricsTypes } from "@components/Metrics/Metrics";
import { Table } from "@components/Table/Table";
import Company from "@components/company-title/Company";
import Sentiment, { SentimentType } from "@components/sentiment/Sentiment";
import NavigationLink from "@core/components/navigation-link/NavigationLink";
import { GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
import type { Meta, StoryObj } from "@storybook/react";

const meta = {
    title: "Example/Table",
    component: Table,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
    argTypes: {},
} satisfies Meta<typeof Table>;

export default meta;

type Story = StoryObj<typeof meta>;

const columnData: GridColDef[] = [

    {
        field: "name",
        headerName: "Name",
        width: 150,
        renderCell: (props: GridRenderCellParams<any, any>) => {
            const values = props?.value
            return <Company label={values?.label} src={values?.src}></Company>
        },
    },
    {
        field: "label",
        headerName: "Label",
        width: 180,
    },
    {
        field: "link",
        headerName: "Label",
        width: 180,
        renderCell: (props: GridRenderCellParams<any, any>) => {
            const values = props?.value
            return <NavigationLink text={"Value Link"}></NavigationLink>
        },

    },
    {
        field: "text",
        headerName: "Label",
        width: 180,
        renderCell: (props: GridRenderCellParams<any, any>) => {
            return <Company label={props?.value} ></Company>
        },

    },
    {
        field: "metrics",
        headerName: "Metrics",
        width: 94,
        renderCell: (props: GridRenderCellParams<any, any>) => {
            const values = props?.value
            return <Metrics label={values?.label} type={values?.type}></Metrics>
        },
    },
    {
        field: "sentiment",
        headerName: "sentiment",
        width: 180,
        renderCell: (props: GridRenderCellParams<any, any>) => {
            return <Sentiment sentiment={props?.value}></Sentiment>
        },
    },

];

const rowsData = [
    { id: 1, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.SUCCESS }, sentiment: SentimentType.POSITIVE },
    { id: 2, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.WARNING }, sentiment: SentimentType.NEUTRAL },
    { id: 3, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.ERROR }, sentiment: SentimentType.NEGATIVE },
    { id: 4, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.NEUTRAL }, sentiment: SentimentType.STRONGLY_NEGATIVE },
    { id: 5, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.SUCCESS }, sentiment: SentimentType.STRONGLY_POSITIVE },
    { id: 6, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.ERROR }, sentiment: SentimentType.POSITIVE },
    { id: 7, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.WARNING }, sentiment: SentimentType.NEGATIVE },
    { id: 8, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.NEUTRAL }, sentiment: SentimentType.NEUTRAL },
    { id: 9, label: "Value", link: "Value Link", name: { label: 'Acme Inc', src: "static/media/src/stories/assets/user.svg" }, text: "Acme Inc", metrics: { label: '99', type: MetricsTypes.SUCCESS }, sentiment: SentimentType.STRONGLY_POSITIVE },
];


export const Sample1: Story = {
    args: {
        rows: rowsData,
        columns: columnData,
        checkboxSelection: true,
    },
};

export const Sample2: Story = {
    args: {
        rows: rowsData,
        columns: columnData,
    },
};