import styled from "@emotion/styled"
import { DARK_MODE, color, token } from "~/options/theme"

export const ButtonWrapper = styled.button`
  background: transparent;
  padding: 0;
  border: none;
  display: flex;
`

export const TabsContainer = styled.div`
  margin: 0 16px;
  padding: 5px 0;
`

export const TabHeader = styled.div`
  display: flex;
  margin-top: 12px;
  margin-bottom: 20px;
`

// use <button> props
export const TabButton: React.FC<
  { active: boolean } & React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  >
> = ({ active, ...props }) => (active ? <Pill {...props} /> : <PillBase {...props} />)

export const IconButton = styled.button`
  background: transparent;
  border-radius: 5px;
  border: none;
  color: #9da2a6;
  &:hover,
  &.active {
    background-color: ${color("#f6f8fa", "#2b3245")};
    color: ${token.accent.fg};
  }
`

const PillBase = styled.button`
  align-items: center;
  background: transparent;
  border-radius: 6px;
  border: 1px solid transparent;
  color: #9da2a6;
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  &:not(:disabled):hover {
    background-color: ${color("#e9e7e7", "#2b3245")};
    color: ${color("#1782ea", "#b2d9ff")};
  }
  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
`

export const Pill = styled(PillBase)`
  background-color: ${token.canvas.overlay};
  border: 1px solid ${token.border.default};
  color: ${color("#000", "#c9d1d9")};

  ${DARK_MODE} {
    border-color: #444a57;
  }

  > svg {
    margin-right: 4px;
  }
`

export const BlockButton = styled(Pill)`
  width: 100%;
  height: 2.3em;
`

const ButtonPill = (_: {
  backgroundColor: string
  boxShadow: string
  color: string
  hover: {
    backgroundColor: string
    boxShadow: string
  }
  active: {
    backgroundColor: string
    boxShadow: string
  }
  disabled?: {
    color?: string
  }
}) => styled(PillBase)`
  background-color: ${_.backgroundColor};
  border: none;
  box-shadow: ${_.boxShadow};
  color: ${_.color};
  width: 100%;
  line-height: 1.5;
  transition: 0.1s;

  &[disabled] {
    color: ${_.disabled?.color ?? token.fg.default};
    opacity: 0.5;
  }

  &&:hover {
    && {
      background-color: ${_.hover.backgroundColor};
      box-shadow: ${_.hover.boxShadow};
      color: ${_.color};
    }
  }

  &:active {
    background-color: ${_.active.backgroundColor};
    box-shadow: ${_.active.boxShadow};
  }
`

export const PrimaryPill = ButtonPill({
  backgroundColor: "#1e88e5",
  boxShadow: "0px 2px 4px rgba(30, 136, 229, 0.4)",
  color: "#fff",
  hover: {
    backgroundColor: "#245fb3",
    boxShadow: "0px 2px 8px rgba(30, 136, 229, 0.6)",
  },
  active: {
    backgroundColor: "#1c4d8c",
    boxShadow: "none",
  },
  disabled: {
    color: "#fff",
  },
})

export const DangerPill = ButtonPill({
  backgroundColor: "#ad241a",
  boxShadow: "none",
  color: "#fff",
  hover: {
    backgroundColor: "#c62828",
    boxShadow: "0px 1px 2px rgba(244, 67, 54, 0.4)",
  },
  active: {
    backgroundColor: "#b71c1c",
    boxShadow: "none",
  },
})

export const Input = styled.input`
  background-color: ${token.canvas.overlay};
  border: 1px solid ${token.border.muted};
  border-radius: 5px;
  padding: 7px 10px;
  width: 100%;

  &:focus {
    border-color: transparent;
    outline: 1px solid ${token.accent.emphasis};
    transition: outline 0.1s;
  }
`

export const Subheading = styled.div`
  flex-grow: 1;
  font-size: 0.88em;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  > option {
    text-transform: none;
  }
`

export const SubheadingButton = styled(IconButton)`
  svg {
    font-size: 1.14286em;
  }
  margin-top: -5px;
  height: 1.35em;
`
