import { indicators, indicatorPositions } from "./constants";

export default function stylesheet(props = {}, themeData = {}, themeMeta = {}) {
  const {
    hasHover,
    indicator,
    indicatorPosition,
    collapsed,
    disabled,
    stylesheet: customStylesheet
  } = props;

  const transitionDuration = "0.3s";

  const styles = {
    wrapper: {
      height: "auto",
      width: "auto",
      display: "flex",
      flexDirection: "column",
      alignItems: "stretch"
    },
    contentTransitionWrapper: {
      transitionProperty: "height",
      transitionDuration: ".3s",
      transitionTimingFunction: "ease-in-out"
    },
    header: {
      display: "flex",
      alignItems: "center",
      backgroundColor: themeData["accordion.header.backgroundColor"],
      border: 0,
      outline: 0,
      padding: `${themeData["accordion.header.verticalPadding"]} ${
        themeData["accordion.header.horizontalPadding"]
      }`,
      ...(indicatorPosition === indicatorPositions.RIGHT && {
        paddingLeft: themeData["accordion.header.indicatorOnRight.paddingLeft"],
        paddingRight:
          themeData["accordion.header.indicatorOnRight.paddingRight"]
      }),
      fontFamily: themeData["accordion.header.fontFamily"],
      fontSize: themeData["accordion.header.fontSize"],
      fontWeight: themeData["accordion.header.fontWeight"],
      lineHeight: themeData["accordion.header.lineHeight"],
      color: themeData["accordion.header.color"],
      width: "100%",
      opacity: disabled ? themeData["component.disabled.opacity"] : "1"
    },
    indicator: {
      order: indicatorPosition === indicatorPositions.LEFT ? -1 : 1,
      flexGrow: 0,
      flexShrink: 0,
      width: themeData["accordion.header.indicator.size"],
      textAlign: "center",
      "> path": {
        fill:
          !disabled && hasHover
            ? themeData["accordion.header.hover.indicator.color"]
            : themeData["accordion.header.indicator.color"]
      },
      marginRight:
        indicatorPosition === indicatorPositions.LEFT
          ? themeData["accordion.header.indicator.gutter"]
          : 0,
      marginLeft:
        indicatorPosition === indicatorPositions.LEFT
          ? 0
          : themeData["accordion.header.indicator.gutter"],
      transitionDuration,
      transform:
        indicator === indicators.CARET && !collapsed ? "rotate(90deg)" : "none"
    },
    label: {
      order: 0,
      flexGrow: 1,
      textAlign: "left",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis",
      overflow: "hidden"
    }
  };

  if (customStylesheet) {
    return customStylesheet(styles, props, themeData, themeMeta);
  }
  return styles;
}

@@ -853,23 +853,23 @@
 der.
-verticalPadding
+paddingVertical
 %22%5D%7D 
@@ -907,17 +907,24 @@
 .header.
-h
+paddingH
 orizonta
@@ -928,15 +928,8 @@
 ntal
-Padding
 %22%5D%0A 
@@ -1049,34 +1049,32 @@
 header.indicator
-On
 Right.paddingLef
@@ -1151,10 +1151,8 @@
 ator
-On
 Righ
@@ -1455,17 +1455,21 @@
 .header.
-c
+fontC
 olor%22%5D,%0A
@@ -1748,10 +1748,9 @@
 ator
-.s
+S
 ize%22
@@ -1892,34 +1892,33 @@
 .hover.indicator
-.c
+C
 olor%22%5D%0A         
@@ -1963,10 +1963,9 @@
 ator
-.c
+C
 olor
@@ -2094,26 +2094,25 @@
 er.indicator
-.g
+G
 utter%22%5D%0A    
@@ -2261,10 +2261,9 @@
 ator
-.g
+G
 utte

use updated theme-data role names