import React from "react";
import { Box } from "../components/Box";
import { Flex } from "../components/Flex";

const styles = {
  outsideContainer: {
    fontSize: "16px",
    WebkitFontSmoothing: "antialiased",
    WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
  },
  insideContainer: {
    fontSize: "14px",
    lineHeight: "20px",
  },
  headings: {
    paddingBottom: "20px",
    fontWeight: 700,
    color: "rgba(51, 51, 51, 0.6)",
  },
  headingName: {
    flex: "0 0 30%",
  },
  paletteTitle: {
    flex: "0 0 30%",
    lineHeight: "20px",
    marginTop: "5px",
    fontWeight: 700,
    color: "#333",
  },
  paletteSwatches: {
    marginBottom: "30px",
  },
  colorItems: {
    borderRadius: "4px",
    boxShadow: "rgba(0,0,0,0.10) 0 1px 3px 0",
    border: "1px solid #dee7ee",
    height: "50px",
    marginBottom: "5px",
  },
  colorItemName: {
    fontSize: "12px",
    color: "rgba(51, 51, 51, 0.6)",
  },
};

export const CustomColorPalette = ({
  title,
  colors,
  background = "#fff",
}: {
  title: string;
  colors: { [key: string]: string };
  background?: string;
}) => {
  const colorKeys: string[] = Object.keys(colors);
  const colorValues: string[] = Object.values(colors);

  return (
    <Box className="font-sans m-0" style={styles.outsideContainer}>
      <Flex
        className="flex-col docblock-colorpalette"
        style={styles.insideContainer}
      >
        <Flex className="flex-row items-center" style={styles.headings}>
          <Box style={styles.headingName}>Name</Box>
          <Box className="flex-1">Swatches</Box>
        </Flex>

        <Flex className="items-start">
          <Box style={styles.paletteTitle}>{title}</Box>
          <Flex className="flex-row flex-1">
            <Flex
              className="flex-col flex-1 relative"
              style={styles.paletteSwatches}
            >
              <Flex
                className="flex-row overflow-hidden"
                style={{
                  background,
                  ...styles.colorItems,
                }}
              >
                {colorValues.map((backgroundColor) => (
                  <Box
                    key={backgroundColor}
                    className="flex-1"
                    style={{
                      backgroundColor,
                    }}
                  />
                ))}
              </Flex>

              <Flex className="flex-row">
                {colorKeys.map((key) => (
                  <Box
                    key={key}
                    className="flex-1 text-center font-mono leading-none overflow-hidden"
                    style={styles.colorItemName}
                  >
                    <Box>
                      {key}
                      <Box
                        as="span"
                        className="block"
                        style={{
                          marginTop: "2px",
                        }}
                      >
                        {colors[key]}
                      </Box>
                    </Box>
                  </Box>
                ))}
              </Flex>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Box>
  );
};