import React, { useMemo, useRef, useState } from "react";
import { ComponentStory } from "@storybook/react";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { Table } from "./Table";
import { TableDocs } from "./TableDocs";
import { ColumnsType } from "antd/lib/table";
import { Space } from "antd";

export default {
  title: "Organism/Table",
  component: Table,
  args: {
    disabled: false,
    vertical: false,
  },
  parameters: {
    docs: {
      page: TableDocs,
    },
  },
};

interface DataType {
  key: string;
  fio: string;
  sub: string;
  email: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: "ФИО",
    dataIndex: "fio",
    key: "fio",
    render: text => <a>{text}</a>,
  },
  {
    title: "Подразделение",
    dataIndex: "sub",
    key: "sub",
  },
  {
    title: "Email",
    dataIndex: "email",
    key: "email",
  },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <a>Отправить письмо</a>
        <a>Удалить</a>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: "1",
    fio: "Абидов Астемир Русланович",
    sub: "20063 Группа внедрения...",
    email: "aar211@komus.net",
  },
  {
    key: "2",
    fio: "Абидов Астемир Русланович",
    sub: "20063 Группа внедрения...",
    email: "aar211@komus.net",
  },
  {
    key: "3",
    fio: "Абидов Астемир Русланович",
    sub: "20063 Группа внедрения...",
    email: "aar211@komus.net",
  },
];

export const Basic: ComponentStory<any> = args => {
  const editor = useRef(null);
  const [content, setContent] = useState("");
  const [placeholder, setPlaceholder] = useState("");

  const config = useMemo(() => {
    return {
      readonly: false, // all options from https://xdsoft.net/jodit/doc/,
      placeholder: placeholder || "Start typings...",
    };
  }, [placeholder]);

  return (
    <StoryLayout>
      <Table columns={columns} dataSource={data} />
    </StoryLayout>
  );
};

Basic.parameters = {
  docs: {
    storyDescription: "Базовый пример использования компонента",
  },
};

Basic.argTypes = {
  title: {
    defaultValue: "Field name",
    control: {
      type: "text",
    },
  },
};