import React, { useState } from "react";
import { Drawer as AntdDrawer, Flex } from "antd";
import { EditOutlined, CloseOutlined } from "@ant-design/icons";
import { useTheme } from "styled-components";
import Text from "../Text/Text";

export const Drawer = (props) => {
  const {
    open,
    title,
    placement,
    children = "content",
    onEdit,
    editIcon: EditIcon,
    onClose,
    closeIcon: CloseIcon,
    tabs,
    styles,
    ...rest
  } = props;
  const theme = useTheme();

  const [activeTab, setActiveTab] = useState(tabs?.[0]?.id);

  return (
    <AntdDrawer
      title={
        <Flex gap="small" vertical>
          <Flex justify="space-between" align="center" style={{ paddingBottom: tabs?.length ? 0 : 8 }}>
            {typeof title === "string" ? (
              <Text className="veris-drawer-title" style={{ fontSize: "20px" }}>
                {title}
              </Text>
            ) : (
              title
            )}
            <Flex gap="middle" justify="flex-end">
              {onEdit &&
                (EditIcon ? (
                  <EditIcon className="veris-drawer-edit-icon" />
                ) : (
                  <EditOutlined className="drawer-edit-icon" onClick={onEdit} />
                ))}
              {onClose &&
                (CloseIcon ? (
                  <CloseIcon className="veris-drawer-close-icon" />
                ) : (
                  <CloseOutlined className="drawer-close-icon" onClick={onClose} />
                ))}
            </Flex>
          </Flex>

          {tabs?.length && (
            <Flex style={{ fontSize: "14px", fontFamily: "Gilroy", fontWeight: 500 }}>
              {tabs?.map((tab) => (
                <Flex vertical style={{ marginRight: 20 }} key={tab.id}>
                  <div
                    id={`veris-drawer-tab-${tab.label}`}
                    className="veris-drawer-tab"
                    onClick={() => {
                      tab?.onClick && tab.onClick(tab.id);
                      setActiveTab(tab?.id);
                    }}
                    style={{
                      paddingBottom: "10px",
                      cursor: "pointer",
                      color: tab.id === activeTab ? theme?.antdToken?.colorPrimary : "initial",
                    }}
                  >
                    {tab.label}
                  </div>
                  {tab.id === activeTab && (
                    <div style={{ height: 2, width: "100%", backgroundColor: theme?.antdToken?.colorPrimary }} />
                  )}
                </Flex>
              ))}
            </Flex>
          )}
        </Flex>
      }
      placement={placement}
      onClose={onClose}
      open={open}
      closeIcon={null}
      styles={{
        header: {
          backgroundColor: theme?.colors?.verisBgSecondary,
          padding: "20px",
          paddingBottom: 0,
          color: theme?.colors?.colorText,
          fontWeight: 500,
          borderBottom: "1px solid #C7E6F5",
          ...(styles?.header || {}),
        },
        body: {
          padding: "14px 20px 40px",
          ...(styles?.body || {}),
        },
        footer: {
          ...(styles?.footer || {}),
        },
      }}
      {...rest}
    >
      {children}
    </AntdDrawer>
  );
};