import { h } from "@stencil/core";
import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
import { CopyTextView } from "../components/views/copy-text-view";
import { createStyleSheet } from "../styling/JSS";
import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
import { PortalContainerView } from "../components/sqm-portal-container/sqm-portal-container-view";
import { StatContainerView } from "../components/sqm-stat-container/sqm-stat-container-view";
import { PortalProfileView } from "../components/sqm-portal-profile/sqm-portal-profile-view";
import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
export default {
  title: "New Portal",
};
const style = {
  HeaderSubtitleBold: {
    "font-weight": 500,
    "text-decoration": "underline",
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const item1Props = {
  states: {
    active: false,
  },
  data: {
    label: "Dashboard",
    icon: "house",
    path: "/",
  },
};
const item2Props = {
  states: {
    active: true,
  },
  data: {
    label: "Activity",
    icon: "bar-chart",
    path: "/",
  },
};
const Sidebar = () => {
  return (h(NavigationSidebarView, null,
    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
};
export const Dashboard = () => {
  const sharelinkProps = {
    copyString: "https://ssqt.co/johnsmithrox",
    open: false,
    disabled: false,
    tooltiptext: "Share link copied",
    onClick: () => console.log("Share link copied"),
  };
  const sharecodeProps = {
    copyString: "JOHNSMITH1",
    open: false,
    disabled: false,
    tooltiptext: "Share code copied",
    onClick: () => console.log("Share code copied"),
  };
  const twitterButtonProps = {
    medium: "twitter",
    loading: false,
    disabled: false,
    pill: true,
    type: "default",
    size: "medium",
    icon: "twitter",
    hideicon: false,
    iconslot: "prefix",
    onClick: () => "Facebook share clicked",
    hide: false,
  };
  const facebookButtonProps = {
    medium: "facebook",
    loading: false,
    disabled: false,
    pill: true,
    type: "default",
    size: "medium",
    icon: "facebook",
    hideicon: false,
    iconslot: "prefix",
    onClick: () => "Facebook share clicked",
    hide: false,
  };
  const linkedinButtonProps = {
    medium: "linkedin",
    loading: false,
    disabled: false,
    pill: true,
    type: "default",
    size: "medium",
    icon: "linkedin",
    hideicon: false,
    iconslot: "prefix",
    onClick: () => "Facebook share clicked",
    hide: false,
  };
  return (h("sqm-divided-layout", { direction: "row" },
    h("style", { type: "text/css" }, styleString),
    h(Sidebar, null),
    h("sqm-divided-layout", { direction: "column" },
      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "xx-small",
          padding: "none",
          label: (h("sqm-text", null,
            h("p", null, "Welcome back,"))),
          content: (h("sqm-text", null,
            h("h1", null, "John Smith"))),
        })),
        h(StatContainerView, Object.assign({}, { space: "64px" }),
          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "x-large",
          padding: "none",
          label: (h("sqm-text", null,
            h("h2", null, "Partner and Profit"))),
          content: (h("sqm-text", null,
            h("p", null, "Get rewarded for referring potential customers to MyCompany. Earn commission for each successful lead you send our way"))),
        })),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "small",
          padding: "none",
          label: (h("sqm-text", null,
            h("h3", null, "Share your referral link"))),
          content: h(CopyTextView, Object.assign({}, sharelinkProps)),
        })),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "small",
          padding: "none",
          label: (h("sqm-text", null,
            h("h3", null, "Share your referral code"))),
          content: h(CopyTextView, Object.assign({}, sharecodeProps)),
        })),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "small",
          padding: "none",
          label: (h("sqm-text", null,
            h("h3", null, "Share via social media"))),
          content: (h(PortalContainerView, Object.assign({}, {
            direction: "row",
            padding: "large",
            gap: "xxx-large",
            minWidth: "150px",
          }),
            h(ShareButtonView, Object.assign({}, twitterButtonProps), "Post about us on X"),
            h(ShareButtonView, Object.assign({}, facebookButtonProps), "Share on Facebook"),
            h(ShareButtonView, Object.assign({}, linkedinButtonProps), "Post on Linkedin"))),
        }))))));
};
export const EditProfile = () => {
  return (h("sqm-divided-layout", { direction: "row" },
    h("style", { type: "text/css" }, styleString),
    h(Sidebar, null),
    h("sqm-divided-layout", { direction: "column" },
      h(PortalProfileView, Object.assign({}, {
        states: {
          success: false,
          loading: false,
          submitDisabled: false,
          showCountry: false,
          user: {
            id: "01",
            accountId: "111100000",
            firstName: "Joe",
            lastName: "Smith",
            email: "jsmith@gmail.com",
            countryCode: "5000",
          },
          text: {
            firstnametext: "First Name",
            lastnametext: "Last Name",
            emailtext: "Email",
            countrytext: "Country",
            editProfileHeader: "Edit your profile",
            editProfileSubHeader: "Personal Information",
            submitChangeButtonText: "Submit Changes",
          },
          formState: {
            country: "Canada",
            firstName: "Joe",
            lastName: "Smith",
            errors: null,
            error: "",
          },
        },
        callbacks: {
          onSubmit: (e) => console.log(e),
          onChange: (e) => console.log(e),
        },
      })),
      h(PortalChangePasswordView, Object.assign({}, {
        states: {
          open: true,
          error: "",
          loading: false,
          success: false,
          content: {
            modalChangePasswordHeader: "Change Password",
            cancelText: "Cancel",
            changePasswordButtonText: "Change Password",
            passwordFieldLabel: "Password",
            confirmPasswordFieldLabel: "Confirm new password",
            successMessage: "Your password has been updated.",
            portalChangePasswordHeader: "Password",
            portalChangePasswordButtonText: "Change your password...",
          },
        },
        callbacks: {
          setOpen: () => console.log("open"),
          submit: () => console.log("submit"),
        },
      })))));
};
export const Commissions = () => {
  return (h("sqm-divided-layout", { direction: "row" },
    h("style", { type: "text/css" }, styleString),
    h(Sidebar, null),
    h("sqm-divided-layout", { direction: "column" },
      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "xx-small",
          padding: "none",
          label: (h("sqm-text", null,
            h("h2", null, "Commissions"))),
          content: (h("sqm-text", null,
            h("p", null,
              "for the",
              " ",
              h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
              " ",
              "program"))),
        })),
        h(StatContainerView, Object.assign({}, { space: "64px" }),
          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
};
export const Activity = () => {
  return (h("sqm-divided-layout", { direction: "row" },
    h("style", { type: "text/css" }, styleString),
    h(Sidebar, null),
    h("sqm-divided-layout", { direction: "column" },
      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "xx-small",
          padding: "none",
          label: (h("sqm-text", null,
            h("h2", null, "Activity"))),
          content: (h("sqm-text", null,
            h("p", null,
              "for the",
              " ",
              h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
              " ",
              "program"))),
        })),
        h(PortalSectionView, Object.assign({}, {
          labelMargin: "x-large",
          padding: "none",
          label: (h("sqm-text", null,
            h("h3", null, "Referral Activity"))),
          content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
        }))),
      h(PortalSectionView, Object.assign({}, {
        labelMargin: "x-large",
        padding: "xxx-large",
        label: (h("sqm-text", null,
          h("h3", null, "Traffic Generated"))),
        content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
      })))));
};
