/* eslint-disable @next/next/no-img-element */
import { useState, useEffect } from "react";
import styled from "styled-components";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";

import { CondLayout as Layout } from "@/layout";

const AFFILIATE_PARCENTAGE = 35;
const MIN_RANGE = 1;
const MAX_RANGE = 100;

const plans = [
  { name: "Basic", price: 5, key: "basic", interval: "month" },
  { name: "Standard", price: 31, key: "standard", interval: "month" },
  { name: "Professional", price: 91, key: "professional", interval: "month" },
];

const AffiliateCalculate = ({ name, price, affiliateAmound, planKey }) => {
  const [referrals, setReferrals] = useState(MIN_RANGE);
  const [amound, setAmound] = affiliateAmound;

  const referralsChange = (refValue) => {
    setReferrals(refValue);
    const calAmound = Math.round(
      (AFFILIATE_PARCENTAGE / 100) * (price * refValue)
    );
    setAmound({ ...amound, [planKey]: calAmound });
  };

  useEffect(() => {
    const calculatePrice = Math.round(
      (AFFILIATE_PARCENTAGE / 100) * (price * MIN_RANGE)
    );
    setAmound(Object.assign(amound, { [planKey]: calculatePrice }));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <StyledAffiliateCalculate>
      <p style={{ flex: 2 }}>
        {name} plan (${price}/mo)
      </p>
      <div style={{ flex: 9, margin: "0 25px" }}>
        <Slider
          min={MIN_RANGE}
          max={MAX_RANGE}
          onChange={referralsChange}
          defaultValue={MIN_RANGE}
          step={1}
        />
      </div>

      <p style={{ flex: 1 }}>
        <strong>{referrals}</strong> referrals
      </p>
    </StyledAffiliateCalculate>
  );
};

const arrayAdd = (numArr = []) => {
  if (Array.isArray(numArr) && numArr.length) {
    return numArr.reduce((a, b) => a + b);
  } else {
    return 0;
  }
};

const terms = [
  "Self-referrals are not allowed (i.e. signing up for Testimonial through your own affiliate link)",
  "Abuse, gaming, or attempting to mislead (i.e. posting fake discounts to coupon-sharing websites) will result in your account being permanently banned.",
  "In some cases, we can give credit to an affiliate even if the customer didn’t sign up through an affiliate link or coupon code. If you have a case like this, please contact us and well do our best to help.",
  "No search engine ads (especially on branded terms or domain names), Facebook ads or other ads that would compete with our own marketing and cause potential confusion for customers.",
  "No search engine ads (especially on branded terms or domain names), Facebook ads or other ads that would compete with our own marketing and cause potential confusion for customers.",
  "No Facebook ads that link to our website or anything similar that would compete with our own paid marketing and drive up our costs and potentially cause confusion.",
  "No pretending to be acting on behalf of us (ie. as an employee).",
  "We reserve the right to change the Terms of Service for our affiliate program at any time.",
];

const works = [
  {
    icon: "fas fa-hand-paper",
    text: "Sign up our affiliate program and get a unique link that can be shared",
  },
  {
    icon: "fas fa-share-alt",
    text: "Share your link with your friends, customers, clients...",
  },
  {
    icon: "fas fa-money-bill",
    text: "You'll get 35% recurring commission for every successful referral",
  },
];

const Affiliates = () => {
  const affiliateAmound = useState({});
  const [amound] = affiliateAmound;
  const affiliateTotal = arrayAdd(Object.values(amound));

  const handleJoinAffiliate = () => {
    if (typeof window !== "undefined") {
      window.location.href = "https://copywriterpro.getrewardful.com/signup";
    }
  };

  const handlLoginAffiliate = () => {
    if (typeof window !== "undefined") {
      window.location.href = "https://copywriterpro.getrewardful.com/login";
    }
  };

  return (
    <Layout>
      <Container>
        <Section>
          <SectionHead>
            <h1>Become Our Partner, Get 35% Commission</h1>
            <p>
              Partner with us to earn a recurring 35% commission every month!{" "}
              <br />
              {/* Your referred customer will also get 15% off for the first year. */}
            </p>
          </SectionHead>
          <ButtonGroup>
            <JoinAffiliateBtn onClick={handleJoinAffiliate}>
              Join our affiliate program
            </JoinAffiliateBtn>
            <LoginAffiliateDashboard onClick={handlLoginAffiliate}>
              Login to affiliate dashboard
            </LoginAffiliateDashboard>
          </ButtonGroup>
          <PoweredSection>
            <PoweredBy>
              <PoweredByItem>
                <img
                  src="https://testimonial.to/static/media/rewardful.bce901b7.svg"
                  alt="Rewardful"
                />
                <p>Full featured dashboard (Powered by Rewardful)</p>
              </PoweredByItem>
              <PoweredByItem>
                <img
                  src="data:image/png;base64, "
                  alt="Paypal"
                />
                <p>Monthly payout via PayPal. No minimum threshold!</p>
              </PoweredByItem>
            </PoweredBy>
          </PoweredSection>
        </Section>
        <Section MaxWidth="48rem">
          <SectionHead>
            <h2>
              You can earn <span>${affiliateTotal}</span> every month
            </h2>
            <p>The calculation is based on monthly price</p>
          </SectionHead>
          <div>
            {plans.map((plan) => (
              <AffiliateCalculate
                key={plan.key}
                planKey={plan.key}
                name={plan.name}
                price={plan.price}
                affiliateAmound={affiliateAmound}
              />
            ))}
          </div>
        </Section>
        <Section MaxWidth="48rem">
          <SectionHead>
            <h2>How it works</h2>
          </SectionHead>
          <div>
            {works.map((work, index) => (
              <StyledWorkItem key={index}>
                <span className={work.icon}></span>
                <p>{work.text}</p>
              </StyledWorkItem>
            ))}
          </div>
        </Section>
        <Section MaxWidth="48rem">
          <SectionHead>
            <h2>Affiliate terms</h2>
            <p>
              There are a few rules about our affiliate program you should know
              about. No “gotchas” here, just some terms to keep everyone happy.
            </p>
          </SectionHead>
          <div>
            <StyledTermList>
              {terms.map((term, index) => (
                <li key={index}>{term}</li>
              ))}
            </StyledTermList>
          </div>
        </Section>
        <Section
          MaxWidth="100%"
          style={{ background: "#F5F3FF", padding: "90px 0" }}
        >
          <SectionHead>
            <h2>Ready to partner with us?</h2>
            <JoinAffiliateBtn onClick={handleJoinAffiliate}>
              Join our affiliate program
            </JoinAffiliateBtn>
          </SectionHead>
        </Section>
      </Container>
    </Layout>
  );
};

const Container = styled.div`
  padding: 0 5px;
`;

const Section = styled.section`
  margin: 7rem auto;
  padding: 0 5px;
  max-width: ${({ MaxWidth }) => (MaxWidth ? MaxWidth : "72rem")};
`;

const SectionHead = styled.div`
  text-align: center;

  h1 {
    font-weight: 800;
    line-height: 1.25;
    font-size: 3.2rem;
    margin-bottom: 2rem;
  }
  h2 {
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 2rem;
    font-size: 2.2rem;
  }
  p {
    color: gray;
    font-size: 20px;
    line-height: 30px;
    margin-top: 1rem;
  }
  span {
    color: #33b19b;
  }
`;

const ButtonGroup = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;

  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

const Btn = styled.button`
  background: #f1f1f1;
  border: 0;
  padding: 0.8rem 2rem;
  font-size: 1.125rem;
  border-radius: 4px;
  margin: 0 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

  &:hover {
    opacity: 0.9;
  }

  @media (max-width: 768px) {
    width: 100%;
    margin: 10px 0px;
  }
`;

const JoinAffiliateBtn = styled(Btn)`
  background: #33b19b;
  color: white;
`;

const LoginAffiliateDashboard = styled(Btn)`
  background: white;
  color: #33b19b;
`;

const StyledAffiliateCalculate = styled.div`
  display: flex;
  align-items: center;
  margin: 15px 0;
`;

const StyledWorkItem = styled.div`
  display: flex;
  align-items: center;
  margin: 25px 0;

  span {
    margin-right: 15px;
    background: #33b19b;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  p {
    margin: 0;
    color: #55595f;
    font-size: 18px;
  }

  @media (max-width: 768px) {
    span {
      display: none;
    }
  }
`;

const StyledTermList = styled.ul`
  li {
    margin: 25px 0;
    color: #55595f;
    font-size: 17px;
    line-height: 24px;
  }
`;

const PoweredSection = styled.div`
  max-width: 42rem;
  margin: 0 auto;
`;

const PoweredBy = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5rem;
`;

const PoweredByItem = styled.div`
  text-align: center;
  max-width: 15rem;
  img {
    height: 40px;
  }
  p {
    padding-top: 1.8rem;
    color: #55595f;
    font-size: 18px;
    line-height: 27px;
  }
`;

export default Affiliates;
