import { Meta } from "@storybook/react";
import { ExpansionPanelProps } from "./ExpansionPanelProps";
import ExpansionPanel from "./ExpansionPanel";
import React from "react";
import { data } from "@/components/Layout/ExpansionPanel/mockData/data";
import Reveal from "@/components/Animation/Reveal/Reveal";
import { ExpansionPanelContent } from "@progress/kendo-react-layout";

export default {
  title: "Design System/Layout/ExpansionPanel",
  component: ExpansionPanel,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact ExpansionPanel component allows the user to switch between detail or summary view by expanding or collapsing the content. \n\n```javascript\nimport { ExpansionPanel } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaControls: {
      control: { type: "text" },
      description:
        "Sets aria-controls. The value should represent the id of the controlled content element.",
    },
    children: {
      control: { type: "text" },
      description:
        "The React elements that will be rendered inside the ExpansionPanel.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the ExpansionPanel.",
    },
    collapseIcon: {
      control: { type: "text" },
      description:
        "Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.",
    },
    collapseSVGIcon: {
      control: { type: "object" },
      description:
        "Sets a custom SVG icon for the collapsed state of the ExpansionPanel.",
    },
    dir: {
      control: { type: "text" },
      description: "Sets the dir property of the ExpansionPanel.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Sets the disabled state of the ExpansionPanel.",
    },
    expanded: {
      control: { type: "boolean" },
      description: "Sets the expanded state of the ExpansionPanel.",
    },
    expandIcon: {
      control: { type: "text" },
      description:
        "Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.",
    },
    expandSVGIcon: {
      control: { type: "object" },
      description:
        "Sets a custom SVG icon for the expanded state of the ExpansionPanel.",
    },
    id: {
      control: { type: "text" },
      description: "Sets the id property of the root ExpansionPanel element.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the ExpansionPanel.",
    },
    subtitle: {
      control: { type: "text" },
      description:
        "Specifies the secondary text in the header of the ExpansionPanel.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Sets the tabIndex property of the ExpansionPanel.",
    },
    title: {
      control: { type: "text" },
      description:
        "Specifies the primary text in the header of the ExpansionPanel.",
    },
    onAction: {
      control: { type: "object" },
      description:
        "The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.",
    },
  },
} as Meta;

export const Default = (args: ExpansionPanelProps): JSX.Element => {
  const [expanded, setExpanded] = React.useState("Brazil");
  return (
    <div style={{ width: "20rem" }}>
      {data.map((item) => (
        <ExpansionPanel
          title={item.country}
          subtitle={item.continent}
          expanded={expanded === item.id}
          tabIndex={0}
          key={item.id}
          onAction={(event) => {
            setExpanded(event.expanded ? "" : item.id);
          }}
        >
          <Reveal>
            {expanded === item.id && (
              <ExpansionPanelContent>
                <div>
                  <img
                    src={item.imageUrl}
                    alt={`KendoReact Layout ${item.country}`}
                    width={"100%"}
                  />
                  <span>{item.text}</span>
                </div>
              </ExpansionPanelContent>
            )}
          </Reveal>
        </ExpansionPanel>
      ))}
    </div>
  );
};

Default.args = {
  dataTestId: "expansion-panel-data-testid",
};