import { h } from "@stencil/core";
import { CopyTextView } from "../views/copy-text-view";
import { ShareLinkView } from "./sqm-share-link-view";
import scenario from "./ShareLink.feature";
export default {
  title: "Components/Share Link",
  parameters: {
    scenario,
  },
};
export const Default = () => {
  const props = {
    copyString: "https://noah.example.com",
    open: false,
    tooltiptext: "Copied!",
  };
  return h(CopyTextView, Object.assign({}, props));
};
export const Tooltip = () => {
  const props = {
    copyString: "https://noah.example.com",
    tooltiptext: "Some text for the tooltip",
    open: true,
  };
  return h(CopyTextView, Object.assign({}, props));
};
export const Disabled = () => {
  const props = {
    copyString: "https://noah.example.com",
    disabled: true,
    open: true,
    tooltiptext: "Copied!",
  };
  return h(CopyTextView, Object.assign({}, props));
};
export const Error = () => {
  const props = {
    copyString: "https://noah.example.com",
    disabled: true,
    open: true,
    tooltiptext: "Copied!",
    error: true,
  };
  return h(CopyTextView, Object.assign({}, props));
};
export const TextAlignCenter = () => {
  return h("sqm-share-link", { textAlign: "center" });
};
export const TextAlignRight = () => {
  return h("sqm-share-link", { textAlign: "right" });
};
export const CopyButton = () => {
  return (h(CopyTextView, Object.assign({}, {
    copyString: "https://noah.example.com",
    open: false,
    tooltiptext: "Copied!",
    isCopyIcon: false,
  })));
};
export const CopyButtonBelow = () => {
  return (h(CopyTextView, Object.assign({}, {
    copyString: "https://noah.example.com",
    open: false,
    tooltiptext: "Copied!",
    buttonStyle: "button-below",
  })));
};
export const CustomStyles = () => {
  const props = {
    copyString: "https://noah.example.com",
    open: false,
    tooltiptext: "Copied!",
    backgroundColor: "#1ed760",
    borderRadius: "30px",
    textColor: "#121212",
    buttonType: "primary",
  };
  return h(CopyTextView, Object.assign({}, props));
};
export const CustomStylesWithDemoHooks = () => {
  return (h("sqm-share-link", { demoData: {
      copyTextViewProps: {
        copyString: "https://noah.example.com",
        open: false,
        tooltiptext: "Copied!",
        backgroundColor: "#1ed760",
        borderRadius: "30px",
        textColor: "red",
        buttonType: "primary",
        borderColor: "#121212",
      },
    }, backgroundColor: "#1ed760" }));
};
export const FullStack = () => {
  return h("sqm-share-link", null);
};
// Customize URL stories
const noopFn = () => { };
const defaultCustomizeProps = {
  copyTextViewProps: {
    copyString: "https://ssqt.co/abc123",
    open: false,
    tooltiptext: "Copied!",
  },
  allowCustomization: true,
  customizeLinkLabel: "Customize Link",
  saveLabelText: "Save",
  savingLabelText: "Saving...",
  cancelLabelText: "Cancel",
  editLabelText: "Edit your link",
  charactersRemainingText: "{count} characters remaining",
  validatingLabelText: "Validating...",
  isEditing: false,
  editValue: "",
  domainPrefix: "https://ssqt.co/",
  editsRemaining: 3,
  maxEdits: 5,
  limitReached: false,
  validationError: null,
  isValidating: false,
  isSaving: false,
  characterLimit: 15,
  minCharacters: 3,
  charactersRemaining: 15,
  editLimitText: "You can edit your link up to 5 times.",
  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
  supportLinkText: "Support",
  customizeDisabled: false,
  customizeDisabledTooltip: "Link customization is not available.",
  minCharactersText: "Minimum 3 characters",
  onCustomizeClick: noopFn,
  onEditValueChange: noopFn,
  onSave: noopFn,
  onCancel: noopFn,
};
export const CustomizeUrlDefault = () => {
  return h(ShareLinkView, Object.assign({}, defaultCustomizeProps));
};
export const CustomizeUrlEditing = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    isEditing: true,
    editValue: "nvoiwb18",
    charactersRemaining: 7,
  })));
};
export const CustomizeUrlCustomized = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    copyTextViewProps: {
      ...defaultCustomizeProps.copyTextViewProps,
      copyString: "https://ssqt.co/bobtesterson",
    },
  })));
};
export const CustomizeUrlLimitReached = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    copyTextViewProps: {
      ...defaultCustomizeProps.copyTextViewProps,
      copyString: "https://ssqt.co/bobtesterson",
    },
    editsRemaining: 0,
    limitReached: true,
  })));
};
export const CustomizeUrlDisabled = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    customizeDisabled: true,
  })));
};
export const CustomizeUrlValidationError = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    isEditing: true,
    editValue: "nvoiwb18",
    charactersRemaining: 7,
    validationError: {
      code: "EXISTING_CODE_CONFLICT",
      title: "This link is already taken",
      description: "Try adding numbers, a dash or underscore to create a unique link.",
    },
  })));
};
export const CustomizeUrlInvalidCharacters = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    isEditing: true,
    editValue: "nvoiwb18",
    charactersRemaining: 7,
    validationError: {
      code: "INVALID_CHARACTER",
      title: "Please use only letters, numbers, dashes and underscores",
      description: "Special characters can break the link when sharing.",
    },
  })));
};
export const CustomizeUrlProfanity = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    isEditing: true,
    editValue: "nvoiwb18",
    charactersRemaining: 7,
    validationError: {
      code: "BLOCKED_WORD",
      title: "Please try a different link",
      description: "This link contains a restricted word.",
    },
  })));
};
export const CustomizeUrlSaving = () => {
  return (h(ShareLinkView, Object.assign({}, {
    ...defaultCustomizeProps,
    isEditing: true,
    editValue: "bobtesterson",
    isSaving: true,
  })));
};
