import { buildThemedStyles } from "../../AtlantisThemeContext";
import { getTypographyStyles } from "../../Typography";
import { tokens as staticTokens } from "../../utils/design";

const baseLineHeight = staticTokens["typography--lineHeight-base"];

export const useStyles = buildThemedStyles(tokens => {
  const typographyStyles = getTypographyStyles(tokens);

  const shadowBase = tokens["shadow-base"];
  const contentShadow = {
    shadowColor: shadowBase.shadowColor,
    shadowOffset: shadowBase.shadowOffset,
    shadowOpacity: shadowBase.shadowOpacity,
    shadowRadius: shadowBase.shadowRadius,
    elevation: shadowBase.elevation,
  };

  return {
    trigger: {
      flexDirection: "row",
      alignItems: "center",
      gap: tokens["space-small"],
      minHeight: tokens["space-largest"] + tokens["space-small"],
      paddingLeft: tokens["space-base"],
      paddingRight: tokens["space-small"],
      backgroundColor: tokens["color-surface"],
      borderWidth: tokens["border-base"],
      borderColor: tokens["color-border--interactive"],
      borderRadius: tokens["radius-base"],
    },

    triggerOpen: {
      borderWidth: tokens["border-thick"],
      borderColor: tokens["color-interactive--subtle"],
      // On open the border grows from `border-base` to `border-thick`, which
      // would push the content inward by that width delta on each side.
      // Subtract the delta from the horizontal padding so the total inset
      // (border + padding) — and thus the label/value/chevron position — stays
      // constant.
      paddingLeft:
        tokens["space-base"] - (tokens["border-thick"] - tokens["border-base"]),
      paddingRight:
        tokens["space-small"] -
        (tokens["border-thick"] - tokens["border-base"]),
    },

    triggerPressed: {
      borderWidth: tokens["border-thick"],
      borderColor: tokens["color-border--interactive"],
      // Same border-thickness compensation as `triggerOpen` above.
      paddingLeft:
        tokens["space-base"] - (tokens["border-thick"] - tokens["border-base"]),
      paddingRight:
        tokens["space-small"] -
        (tokens["border-thick"] - tokens["border-base"]),
    },

    triggerInvalid: {
      borderColor: tokens["color-critical"],
    },

    triggerDisabled: {
      backgroundColor: tokens["color-disabled--secondary"],
    },

    value: {
      flex: 1,
      color: tokens["color-text"],
      fontFamily: typographyStyles.baseRegularRegular.fontFamily,
      fontSize: typographyStyles.defaultSize.fontSize,
      lineHeight: baseLineHeight,
      letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
    },

    valuePlaceholder: {
      color: tokens["color-text--secondary"],
    },

    valueDisabled: {
      color: tokens["color-disabled"],
    },

    overlay: {
      position: "absolute",
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },

    content: {
      backgroundColor: tokens["color-surface"],
      borderWidth: tokens["border-base"],
      borderColor: tokens["color-border"],
      borderRadius: tokens["radius-base"],
      padding: tokens["space-small"],
      ...contentShadow,
    },

    contentDarkElevated: {
      backgroundColor: tokens["color-surface--background--subtle"],
    },

    item: {
      flexDirection: "row",
      alignItems: "center",
      gap: tokens["space-small"],
      minHeight: tokens["space-largest"] + tokens["space-small"],
      padding: tokens["space-small"],
      borderRadius: tokens["radius-small"],
    },

    itemPressed: {
      backgroundColor: tokens["color-surface--hover"],
    },

    itemPressedDarkElevated: {
      backgroundColor: tokens["color-surface--active"],
    },

    itemText: {
      flex: 1,
      color: tokens["color-text"],
      fontFamily: typographyStyles.baseRegularSemiBold.fontFamily,
      fontSize: typographyStyles.defaultSize.fontSize,
      lineHeight: baseLineHeight,
      letterSpacing: typographyStyles.baseLetterSpacing.letterSpacing,
    },

    itemTextDisabled: {
      color: tokens["color-disabled"],
    },

    itemIndicator: {
      justifyContent: "center",
      alignItems: "center",
    },

    groupLabel: {
      color: tokens["color-text--secondary"],
      fontFamily: typographyStyles.baseRegularRegular.fontFamily,
      fontSize: tokens["typography--fontSize-small"],
      lineHeight: tokens["typography--lineHeight-tight"],
      paddingTop: tokens["space-small"],
      paddingBottom: tokens["space-smaller"],
      paddingHorizontal: tokens["space-small"],
    },

    separator: {
      height: tokens["border-base"],
      backgroundColor: tokens["color-border"],
      marginVertical: tokens["space-small"],
    },
  };
});