import React, { useState } from "react";
import { fn } from "@storybook/test";
import { ChatBotComponent } from "../components/ChatBot";
import { Header } from "../components/Header";
import { Select } from "../components/Select";
import { DateRangePicker } from "../components/DateRangePicker";
import { DatePicker } from "../components/DatePicker";
import { Table } from "../components/Table";
import { options } from "../mock";
import { ReactComponent as NotificationIcon } from "../assets/bell.svg";
import ChatInput from "../components/ChatBot/chatInput";

export default {
  title: "Components/ChatBot",
  component: ChatBotComponent,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "ChatBot is a component that allows users to chat with a bot.",
      },
    },
  },
  argTypes: {
    userName: {
      control: { type: "text" },
    },
    isChatBotOpen: {
      control: { type: "boolean" },
    },
    setIsChatBotOpen: {
      control: { type: "function" },
    },
    conversation: {
      control: { type: "array" },
    },
    // formComponent: {
    //   control: { type: "function" },
    // },
    // tableComponent: {
    //   control: { type: "function" },
    // },
    preDefinedQuestions: {
      control: { type: "array" },
    },
  },
};

// const tableComponent = () => {
//   return (
//     <Table
//       columnDefs={[
//         {
//           field: "make",
//         },
//         {
//           field: "model",
//         },
//         {
//           field: "price",
//           pinned: "left",
//         },
//         {
//           field: "electric",
//         },
//         {
//           field: "electric0",
//         },
//         {
//           field: "electric1",
//         },
//         {
//           field: "electric2",
//           pinned: "right",
//         },
//         {
//           field: "electric3",
//         },
//         {
//           field: "electric4",
//         },
//         {
//           field: "electric5",
//         },
//       ]}
//       onContextualFilterClick={() => {}}
//       onNumberFormatChange={() => {}}
//       rowData={[
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Tesla",
//           model: "Model Y",
//           price: 64950,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Ford",
//           model: "F-Series",
//           price: 33850,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "maruti",
//           model: "dhoni",
//           price: 29600,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Toyota",
//           model: "dhoni",
//           price: 29600,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Toyota",
//           model: "dhoni",
//           price: 29600,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Toyota",
//           model: "Corolla",
//           price: 29600,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Toyota",
//           model: "Corolla",
//           price: 29600,
//         },
//         {
//           electric: true,
//           electric0: true,
//           electric1: "kunal",
//           electric2: "Patel",
//           electric3: "Bangalore",
//           electric4: "Karnataka",
//           electric5: "India",
//           make: "Toyota",
//           model: "Corolla",
//           price: 29600,
//         },
//       ]}
//       tableHeader="Frozen Columns (Left & Right)"
//       hideMarginBottom
//     />
//   );
// };

const formComponent = () => {
  const [open1, setOpen1] = useState(false);
  const [currentOptions1, setCurrentOptions1] = useState(options);
  const [selectedOptions1, setSelectedOptions1] = useState([]);
  const [isSelectAll1, setIsSelectAll1] = useState(false);
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <>
      <Select
        label="label"
        labelOrientation="top"
        name="name"
        placeholder="select.."
        isRequired
        isMulti
        isWithSearch
        // isClearable
        toggleSelectAll
        isOpen={open1}
        setIsOpen={setOpen1}
        currentOptions={currentOptions1}
        setCurrentOptions={setCurrentOptions1}
        initialOptions={options}
        selectedOptions={selectedOptions1}
        setSelectedOptions={setSelectedOptions1}
        isSelectAll={isSelectAll1}
        setIsSelectAll={setIsSelectAll1}
        minWidth={"100%"}
        withPortal={true}
      />
      <DateRangePicker
        label="Date Range Selector"
        showMonthYearSelect
        showWeekNumbers
        isRequired
        startDate={startDate}
        setStartDate={setStartDate}
        endDate={endDate}
        setEndDate={setEndDate}
        handleDatesChange={(startDate, endDate) => {
          setStartDate(startDate);
          setEndDate(endDate);
        }}
        displayFormat="DD-MM-YYYY"
        startDateInputProps={{ label: "StartDate", name: "startDate" }}
        endDateInputProps={{ label: "EndDate", name: "endDate" }}
        onSecondaryButtonClick={() => {
          setStartDate(new Date());
          setEndDate(new Date());
        }}
        handleStartDateFocus={(setFocusedInput) => {
          console.log("clicked start");
        }}
        handleEndDateFocus={(setFocusedInput) => {
          console.log("clicked end");
        }}
        startDateOffset={(day) => {
          let days = day.diff(startDate, "days");
          if (startDate && days > 0) {
            return startDate.startOf("week");
          }
          return day.startOf("week");
        }}
        endDateOffset={(day) => {
          // if (props?.maxEightWeekSelection) {
          //   //adding this case for custom selection range, always to maintain a fixed week range
          //   return day.add(props?.selectionRange, "week");
          // }
          return day.endOf("week");
        }}
      />
      <DatePicker
        displayFormat="DD-MM-YYYY"
        handleDateChange={() => {}}
        label="Date Picker with single month"
        labelOrientation="top"
        onPrimaryButtonClick={() => {}}
        onSecondaryButtonClick={() => {}}
        onTertiaryButtonClick={() => {}}
        placeholder="Select Date"
        portalContainer={document.body}
        selectedDate={selectedDate}
        setSelectedDate={setSelectedDate}
        showMonthYearSelect
        showWeekNumbers
      />
    </>
  );
};

// const customInputComponent = () => {
//   return <ChatInput />;
// };

const ChatBot = (args) => {
  const [isChatBotOpen, setIsChatBotOpen] = useState(false);
  const utilityList = [
    {
      key: "utility1",
      icon: <NotificationIcon />,
      onClick: () => {
        console.log("utility1");
      },
    },
  ];

  return (
    <>
      <Header handleChatBotClick={() => setIsChatBotOpen(!isChatBotOpen)} />
      <ChatBotComponent
        {...args}
        isChatBotOpen={isChatBotOpen}
        setIsChatBotOpen={setIsChatBotOpen}
        formComponent={formComponent()}
        handleRefresh={() => console.log("refresh")}
        handleSaveChat={() => console.log("save chat")}
        // tableComponent={tableComponent()}
        utilityList={utilityList}
        conversation={{
          conversations: {
            1: {
              id: 1,
              name: "Conversation 1",
              timestamp: "2025-07-17T07:32:30.142Z",
              messages: [
                {
                  type: "text",
                  text: "Hellobfwvfhkafberjsvagsjdfvobajkgkrefdbuzajgfkjsaogjklfsabhsdcvdfuhjwfredgiufiwekf",
                  timeStamp: "2025-07-17T07:32:30.142Z",
                  userType: "user",
                  userName: "Himanshu",
                  bodyType: "text",
                  bodyText:
                    "Hellobfwvfhkafberjsvagsjdfvobajkgkrefdbuzajgfkjsaogjklfsabhsdcvdfuhjwfredgiufiwekf",
                },
                {
                  type: "table",
                  // tableComponent: tableComponent(),
                  // "jsx": <Select label="Select" name="select" options={options} />,
                  data: {
                    display_name: "Sample table title",
                    table_name: "sample_table",
                    unique_id: "header_1",
                    select_all_component: true,
                    row_data: [
                      {
                        header_1: "Freshness",
                        header_2:
                          "Stores with decreased Freshness TY vs LY experienced a sharper increase in sales units ty (27.6%) compared to stores with increased Freshness TY (15.8%).",
                        header_3: "low positive",
                      },
                      {
                        header_1: "Overall Discount %",
                        header_2:
                          "Only stores with increased Overall Discount % TY showed an increase in sales units ty (18.0%).",
                        header_3: "low positive",
                      },
                    ],
                    table_config: [
                      {
                        column_header: "header name 1",
                        field: "header_1",
                      },
                      {
                        column_header: "header name 2",
                        field: "header_2",
                      },
                      {
                        column_header: "header name 3",
                        field: "header_3",
                      },
                    ],
                  },
                  agentId: "1",
                  timeStamp: "17-07-2025 13:02:30",
                  userType: "bot",
                  userName: "Alan",
                  headerTitle: "Sample table title",
                  bodyType: "table",
                  bodyText: {
                    display_name: "Sample table title",
                    table_name: "sample_table",
                    unique_id: "header_1",
                    select_all_component: true,
                    row_data: [
                      {
                        header_1: "Freshness",
                        header_2:
                          "Stores with decreased Freshness TY vs LY experienced a sharper increase in sales units ty (27.6%) compared to stores with increased Freshness TY (15.8%).",
                        header_3: "low positive",
                      },
                      {
                        header_1: "Overall Discount %",
                        header_2:
                          "Only stores with increased Overall Discount % TY showed an increase in sales units ty (18.0%).",
                        header_3: "low positive",
                      },
                    ],
                    table_config: [
                      {
                        column_header: "header name 1",
                        field: "header_1",
                      },
                      {
                        column_header: "header name 2",
                        field: "header_2",
                      },
                      {
                        column_header: "header name 3",
                        field: "header_3",
                      },
                    ],
                  },
                },
                {
                  type: "table",
                  jsx: <div>Hello</div>,
                  enableLikes: true,
                  extra: {
                    status: "disliked",
                  },
                  data: {
                    display_name: "Sample table title 2",
                    table_name: "sample_table_2",
                    unique_id: "header_1",
                    select_all_component: true,
                    row_data: [
                      {
                        header_1: "Freshness",
                        header_2:
                          "Stores with decreased Freshness TY vs LY experienced a sharper increase in sales units ty (27.6%) compared to stores with increased Freshness TY (15.8%).",
                        header_3: "low positive",
                      },
                      {
                        header_1: "Overall Discount %",
                        header_2:
                          "Only stores with increased Overall Discount % TY showed an increase in sales units ty (18.0%).",
                        header_3: "low positive",
                      },
                    ],
                    table_config: [
                      {
                        column_header: "header name 1",
                        field: "header_1",
                      },
                      {
                        column_header: "header name 2",
                        field: "header_2",
                      },
                      {
                        column_header: "header name 3",
                        field: "header_3",
                      },
                    ],
                  },
                  agentId: "1",
                  timeStamp: "17-07-2025 13:03:31",
                  userType: "bot",
                  userName: "",
                  headerTitle: "Sample table title 2",
                  bodyType: "table",
                  bodyText: {
                    display_name: "Sample table title 2",
                    table_name: "sample_table_2",
                    unique_id: "header_1",
                    select_all_component: true,
                    row_data: [
                      {
                        header_1: "Freshness",
                        header_2:
                          "Stores with decreased Freshness TY vs LY experienced a sharper increase in sales units ty (27.6%) compared to stores with increased Freshness TY (15.8%).",
                        header_3: "low positive",
                      },
                      {
                        header_1: "Overall Discount %",
                        header_2:
                          "Only stores with increased Overall Discount % TY showed an increase in sales units ty (18.0%).",
                        header_3: "low positive",
                      },
                    ],
                    table_config: [
                      {
                        column_header: "header name 1",
                        field: "header_1",
                      },
                      {
                        column_header: "header name 2",
                        field: "header_2",
                      },
                      {
                        column_header: "header name 3",
                        field: "header_3",
                      },
                    ],
                  },
                  thinkingResponse: {
                    thinkingHeading: "Hi Himanshu",
                    thinkingContent:
                      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.  Lorem is",
                  },
                },
                {
                  type: "chips",
                  headerTitle:
                    "Please select for which Modules you want insights for",
                  data: [
                    {
                      chip_name: "lost_sales",
                      flow_type: "agent",
                    },
                    {
                      chip_name: "inventory_turnover",
                      flow_type: "agent",
                    },
                    {
                      chip_name: "inventory",
                      flow_type: "agent",
                    },
                  ],
                  timeStamp: "",
                  userType: "bot",
                  userName: "",
                  bodyType: "chips",
                  utilityData: {
                    baseUrl: "/inventory-smart",
                  },
                  bodyText: [
                    {
                      id: 0,
                      displayText: "lost_sales",
                      interactable: true,
                      actionType: "direct",
                      actionName: "setUserScreenAndFlow",
                      flow_type: "agent",
                      agentId: "1",
                      sessionId: "",
                    },
                    {
                      id: 1,
                      displayText: "inventory_turnover",
                      interactable: true,
                      actionType: "direct",
                      actionName: "setUserScreenAndFlow",
                      flow_type: "agent",
                      agentId: "1",
                      sessionId: "",
                    },
                    {
                      id: 2,
                      displayText: "inventory",
                      interactable: true,
                      actionType: "direct",
                      actionName: "setUserScreenAndFlow",
                      flow_type: "agent",
                      agentId: "1",
                      sessionId: "",
                    },
                  ],
                },
              ],
            },
          },
        }}
        // customInputComponent={customInputComponent()}
      />
    </>
  );
};

export const Default = (args) => <ChatBot {...args} />;
const tempHistoryData = [
  {
    group_name: "today",
    max_days_diff: 1,
    conversation_list: [
      {
        conversation_id: 6,
        module_name: "Grouping",
        name: "Conversation 7832r4783vhefd7832r4783vhefd",
        pinned: true,
      },
      {
        conversation_id: 7,
        module_name: "Configurations",
        name: "Conversation 97832r4783vhefd",
      },
      {
        conversation_id: 8,
        module_name: "Grouping",
        name: "Conversation 117832r4783vhefd",
      },
      {
        conversation_id: 9,
        module_name: "Allocation",
        name: "Conversation 137832r4783vhefd",
      },
    ],
  },
  {
    group_name: "November -2025",
    max_days_diff: 39,
    conversation_list: [
      {
        conversation_id: 5,
        module_name: "Grouping",
        name: "Conversation ywak68kpbms5y3egiqgvpm",
      },
    ],
  },
  {
    group_name: "October  -2025",
    max_days_diff: 71,
    conversation_list: [
      {
        conversation_id: 4,
        module_name: "Dashboard",
        name: "test conversation32r4783vhefd",
      },
    ],
  },
  {
    group_name: "July     -2025",
    max_days_diff: 182,
    conversation_list: [
      {
        conversation_id: 3,
        module_name: "Dashboard",
        name: "Conversation 47832r4783vhefd",
      },
    ],
  },
  {
    group_name: "May      -2025",
    max_days_diff: 231,
    conversation_list: [
      {
        conversation_id: 2,
        module_name: "Allocation",
        name: "Conversation 347832r4783vhefd",
      },
      {
        conversation_id: 1,
        module_name: "Configurations",
        name: "Conversation 23342347832r4783vhefd",
      },
      {
        conversation_id: 1,
        module_name: "Configurations",
        name: "Conversation 23342347832r4783vhefd",
      },
      {
        conversation_id: 1,
        module_name: "Configurations",
        name: "Conversation 23342347832r4783vhefd",
      },
      {
        conversation_id: 1,
        module_name: "Configurations",
        name: "Conversation 23342347832r4783vhefd",
      },
    ],
  },
];

Default.args = {
  userName: "Himanshu",
  isChatBotOpen: true,
  setIsChatBotOpen: fn(),
  conversation: [],
  historyPanelData: tempHistoryData,
  activeConversationId: 3,
};
