import React from "react";
import { SimpleTable } from "../../components/SimpleTable";
import { tokens } from "../../style-dictionary/dist/tokens";
import { Tooltip } from "../../components/Tooltip";
import { BUTTON_VARIANT, Button } from "../../components/Button";
import { ICON_TYPE } from "../../components/Icon";

export const categories = Object.keys(tokens);

export const copyToClipboard = (text: string) => {
  navigator.clipboard.writeText(text);
};

export const titleize = (string: string) => {
  const title = string.replace(/([A-Z])/g, " $1").toLowerCase();
  return `${title.charAt(0).toUpperCase()}${title.slice(1)}`;
};

export const Table = ({ children, columns }: any) => (
  <SimpleTable className="w-1/2">
    <SimpleTable.Head>
      <SimpleTable.Row>
        {columns.map((column: any) => (
          <SimpleTable.HeaderCell key={column} className="w-1/2">
            {column}
          </SimpleTable.HeaderCell>
        ))}
      </SimpleTable.Row>
    </SimpleTable.Head>
    <SimpleTable.Body>{children}</SimpleTable.Body>
  </SimpleTable>
);

export const TableFull = ({ children, columns }: any) => (
  <SimpleTable style={{ width: "100%" }}>
    <SimpleTable.Head>
      {columns && (
        <SimpleTable.Row>
          {columns.map((column: any, i: number) => (
            <SimpleTable.HeaderCell
              key={column}
              style={{
                width: i === columns.length - 1 ? "auto" : "50%",
              }}
            >
              {column}
            </SimpleTable.HeaderCell>
          ))}
        </SimpleTable.Row>
      )}
    </SimpleTable.Head>
    <SimpleTable.Body>{children}</SimpleTable.Body>
  </SimpleTable>
);

export const Row = ({ children, style }: any) => (
  <SimpleTable.Row
    style={{
      borderBottom: `1px solid ${tokens.color.gray[300]}`,
      verticalAlign: "top",
      ...style,
    }}
  >
    {children}
  </SimpleTable.Row>
);

export const Cell = ({ children, ...rest }: any) => (
  <SimpleTable.Cell {...rest}>{children}</SimpleTable.Cell>
);

export const ClickToCopy = ({ text }: any) => {
  const [copied, setCopied] = React.useState(false);
  const renderProps = {
    onMouseOut: () => setCopied(false),
    onBlur: () => setCopied(false),
    onClick: () => {
      copyToClipboard(text);
      setCopied(true);
    },
  };
  return (
    <Tooltip
      placement="top"
      referenceElement={
        <Button
          variant={BUTTON_VARIANT.MINIMAL}
          icon={ICON_TYPE.CLIPBOARD}
          {...renderProps}
        />
      }
    >
      {copied ? "Copied!" : "Copy token path"}
    </Tooltip>
  );
};

export const Swatch = ({ color }: any) => (
  <div
    style={{
      width: "21px",
      height: "21px",
      borderRadius: "3px",
      backgroundColor: color,
    }}
  />
);