import { getColor } from '../theme/utils.js';

const generateButtonVariant = (theme, variant, color) => {
  var _a, _b, _c, _d, _e, _f;
  const styles = ButtonColors(theme);
  const variantStyles = styles[variant];
  return {
    color: getColor(color, variantStyles.color),
    background: getColor(color, variantStyles.background),
    borderColor: getColor(color, variantStyles.borderColor),
    '&:hover': {
      color: getColor(color, (_a = variantStyles.hover) === null || _a === void 0 ? void 0 : _a.color),
      borderColor: getColor(color, (_b = variantStyles.hover) === null || _b === void 0 ? void 0 : _b.borderColor),
      background: getColor(color, (_c = variantStyles.hover) === null || _c === void 0 ? void 0 : _c.background)
    },
    '&:active': {
      color: getColor(color, (_d = variantStyles.active) === null || _d === void 0 ? void 0 : _d.color),
      borderColor: getColor(color, (_e = variantStyles.active) === null || _e === void 0 ? void 0 : _e.borderColor),
      background: getColor(color, (_f = variantStyles.active) === null || _f === void 0 ? void 0 : _f.background)
    }
  };
};
const ButtonColors = theme => ({
  contained: {
    background: {
      primary: theme.palette.primary.main,
      secondary: theme.palette.secondary.main
    },
    color: {
      primary: theme.palette.primary.dark,
      secondary: theme.palette.primary.main
    },
    borderColor: {
      primary: theme.palette.primary.main,
      secondary: theme.palette.secondary.main
    },
    hover: {
      background: {
        primary: theme.palette.primary.dark,
        secondary: theme.palette.primary.dark
      },
      color: {
        primary: theme.palette.primary.main,
        secondary: theme.palette.primary.main
      },
      borderColor: {
        primary: theme.palette.text.primary,
        secondary: theme.palette.text.secondary
      }
    },
    active: {
      background: {
        primary: theme.palette.primary.main,
        secondary: theme.palette.primary.main
      },
      color: {
        primary: theme.palette.text.secondary,
        secondary: theme.palette.text.secondary
      },
      borderColor: {
        primary: theme.palette.primary.main,
        secondary: theme.palette.primary.main
      }
    }
  },
  outlined: {
    color: {
      primary: theme.palette.text.primary,
      secondary: theme.palette.text.secondary,
      dark: theme.palette.dark.main
    },
    borderColor: {
      primary: theme.palette.text.primary,
      secondary: theme.palette.text.secondary,
      dark: theme.palette.dark.main
    },
    hover: {
      background: {
        primary: theme.palette.action.hover,
        secondary: theme.palette.text.secondary,
        dark: theme.palette.dark.main
      },
      color: {
        primary: theme.palette.primary.dark,
        secondary: theme.palette.primary.dark,
        dark: theme.palette.dark.dark
      },
      borderColor: {
        primary: theme.palette.action.hover,
        secondary: theme.palette.text.secondary,
        dark: theme.palette.dark.dark
      }
    },
    active: {
      background: {
        primary: theme.palette.primary.main,
        secondary: theme.palette.primary.main,
        dark: theme.palette.dark.main
      },
      color: {
        primary: theme.palette.text.secondary,
        secondary: theme.palette.primary.dark,
        dark: theme.palette.text.secondary
      },
      borderColor: {
        primary: theme.palette.primary.main,
        secondary: theme.palette.grey[500],
        dark: theme.palette.dark.main
      }
    }
  },
  text: {
    color: {
      primary: theme.palette.text.primary,
      secondary: theme.palette.text.secondary,
      dark: theme.palette.dark.main
    },
    hover: {
      background: {
        primary: theme.palette.grey[400],
        secondary: theme.palette.grey[800],
        dark: theme.palette.grey[50]
      },
      color: {
        primary: theme.palette.text.primary,
        secondary: theme.palette.secondary.light
      }
    },
    active: {
      background: {
        primary: theme.palette.primary.main,
        secondary: theme.palette.primary.main,
        dark: theme.palette.grey[50]
      },
      color: {
        primary: theme.palette.text.secondary,
        secondary: theme.palette.text.secondary,
        dark: theme.palette.grey[400]
      }
    }
  },
  disabled: {
    color: {
      primary: theme.palette.text.disabled,
      secondary: theme.palette.text.disabled
    },
    background: {
      primary: theme.palette.action.disabledBackground,
      secondary: theme.palette.action.disabledBackground
    }
  }
});

export { ButtonColors, generateButtonVariant };
