import {
  extendTheme,
  NumberDecrementStepper,
  NumberIncrementStepper,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  Select,
  Switch,
} from "@chakra-ui/react"

import { colors } from "./colors"

export const theme = extendTheme({
  colors,
  // edit Input defaultProps
  styles: {
    global: {
      // make all elements padding and margin animate
      "*": {
        transition: "padding 0.2s ease, margin 0.2s ease",
      },
      // make all elements have a transparent focus border
      "input:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
      // make all elements have a transparent focus border
      "textarea:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
      // make all elements have a transparent focus border
      "select:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
      // make all elements have a transparent focus border
      "button:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
      // make all elements have a transparent focus border
      "div:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
      // make all elements have a transparent focus border
      "a:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
      // make all elements have a transparent focus border
      "span:focus": {
        boxShadow: "none !important",
        borderColor: "transparent !important",
      },
    },
  },
  components: {
    Input: {
      defaultProps: {
        // focusBorderColor: "transparent",
        // outline: "0px solid",
        // border: "0px solid",
      },
      baseStyle: {
        // "padding-inline-start": "0px",
        field: {
          // "padding-inline-start": "0px",
        },
      },
    },
    Select: {
      baseStyle: {
        field: {
          // "padding-inline-start": "0px",
        },
        icon: {
          // height: "8px",
          width: "14px",
        },
      },
    },
    Switch: {
      baseStyle: {
        track: {
          background: "grays.medium",
          _checked: {
            background: "chakras.throat",
          },
        },
      },
    },
    NumberInput: {
      baseStyle: {
        field: {
          width: "auto",
          // border: "none",
        },
      },
    },
  },
})

Switch.defaultProps = {
  ...Switch.defaultProps,
  as: "div",
}

Select.defaultProps = {
  ...Select.defaultProps,
  focusBorderColor: "transparent",
  outline: "0px solid",
  border: "none",
  ps: "0px",
  px: "0px",
  sx: {
    paddingInlineStart: "0px",
    paddingInlineEnd: "24px",
  },
}

NumberInput.defaultProps = {
  ...NumberInput.defaultProps,
  variant: "unstyled",
}

NumberInputField.defaultProps = {
  ...NumberInputField.defaultProps,
  height: "100%",
  pr: 3,
  fontSize: "inherit",
  // variant: "unstyled",
}

NumberInputStepper.defaultProps = {
  ...NumberInputStepper.defaultProps,
  border: "none",
  color: "grays.medium",
}

NumberIncrementStepper.defaultProps = {
  ...NumberIncrementStepper.defaultProps,
  border: "none",
}
NumberDecrementStepper.defaultProps = {
  ...NumberDecrementStepper.defaultProps,
  border: "none",
}