import { h, Host } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { HostBlock } from "../../global/mixins";
const medium = {
  facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
  twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
  email: { color: "#666666", text: "#fff", icon: "envelope" },
  direct: {
    color: "var(--sqm-primary-button-background)",
    text: "var(--sqm-primary-button-color)",
    icon: "send",
  },
  linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
  sms: { color: "#34DA50", text: "#fff", icon: "chat" },
  fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
  whatsapp: { color: "#25d366", text: "#fff", icon: "whatsapp" },
  linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
  pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
};
const style = {
  HostBlock: HostBlock,
  buttonStyle: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    lineHeight: "0",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function ShareButtonView(props, children) {
  const vanillaStyle = `
	sl-button::part(base) {
	  border: ${props.border || "none"};
    font-family: var(--sqm-primary-font);

	background: ${props.backgroundcolor
    ? props.backgroundcolor
    : props.medium
      ? medium[props.medium].color
      : ""};
	color: ${props.textcolor
    ? props.textcolor
    : props.medium
      ? medium[props.medium].text
      : ""};
	border-radius: ${props.borderradius
    ? props.borderradius + "px"
    : "var(--sqm-primary-button-radius)"};
	}



	*::part(label) {
		position: relative;
		top: 2%;
	}
	`;
  return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
    h("style", { type: "text/css" }, styleString),
    h("style", { type: "text/css" }, vanillaStyle),
    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
      !props.hidetext && children)));
}
