// I sincerely apologise for the garbage you're about to see

// This file is public domain, I guess. If you use this I would appreciate
// it if you linked back to my blog, but I ain't a cop.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const vatRates = {
  "Austria": 0.20,
  "Belgium": 0.21,
  "Bulgaria": 0.20,
  "Croatia": 0.25,
  "Cyprus": 0.19,
  "Czech Republic": 0.21,
  "Denmark": 0.25,
  "Estonia": 0.20,
  "Finland": 0.24,
  "France": 0.20,
  "Germany": 0.19,
  "Greece": 0.24,
  "Hungary": 0.27,
  "Ireland": 0.23,
  "Italy": 0.22,
  "Latvia": 0.21,
  "Lithuania": 0.21,
  "Luxembourg": 0.17,
  "Malta": 0.18,
  "Netherlands": 0.21,
  "Poland": 0.23,
  "Portugal": 0.23,
  "Romania": 0.19,
  "Slovakia": 0.20,
  "Slovenia": 0.22,
  "Spain": 0.21,
  "Sweden": 0.25,
};

class Calculator extends Component {
  constructor() {
    super();
    this.state = {
      country: "Germany",
      amount: "5.00",
      paypal: false,
      vat: false,
      patreonCreators: [
        {
          id: 0,
          username: "SirCmpwn",
          amount: 5,
          displayAmount: "5.00",
          founding: true,
          plan: "pro",
          upfront: false,
        }
      ]
    };
    this.renderPatreon = this.renderPatreon.bind(this);
  }

  patreonFee(creator) {
    let text, rate, fixed;
    if (creator.founding) {
      return {
        text: "5%",
        fee: creator.amount * 0.05,
      };
    } else {
      switch (creator.plan) {
        case "lite":
          return {
            text: "5%",
            fee: creator.amount * 0.05,
          };
        case "pro":
          if (creator.founding) {
            return {
              text: "5%",
              fee: creator.amount * 0.05,
            };
          }
          return {
            text: "8%",
            fee: creator.amount * 0.08,
          };
        case "premium":
          if (creator.founding) {
            return {
              text: "9%",
              fee: creator.amount * 0.09,
            };
          }
          return {
            text: "12%",
            fee: creator.amount * 0.12,
          };
      }
    }
  }

  transactionFee(creator, paypal) {
    let text, rate, fixed;
    if (creator === null) {
      return {
        text: paypal ? "3.9% + 30¢" : "2.9% + 30¢",
      };
    }
    if (creator.founding && creator.upfront) {
      return {
        text: paypal ? "3.9% + 30¢" : "2.9% + 30¢",
        fee: creator.amount * (paypal ? 0.039 : 0.029) + 0.30,
      };
    } else {
      if (creator.amount <= 3) {
        return {
          text: paypal ? "5% + 10¢" : "5% + 10¢",
          fee: creator.amount * (paypal ? 0.06 : 0.05) + 0.10,
        };
      } else {
        return {
          text: paypal ? "3.9% + 30¢" : "2.9% + 30¢",
          fee: creator.amount * 0.029 + 0.30,
        };
      }
    }
  }

  renderPatreon() {
    const creators = this.state.patreonCreators.slice()
      .sort((a, b) => a.id - b.id);
    const { country, paypal, vat } = this.state;
    const total = creators.reduce((a, c) => a + c.amount, 0);
    const batch_total = creators
      .filter(c => c.founding && !c.upfront)
      .reduce((a, c) => a + c.amount, 0);
    const batch_tx_fee = batch_total ? batch_total *
      (this.state.paypal ? 0.039 : 0.029) + 0.30 : 0;
    const tx_fees = creators.filter(c => !c.founding || c.upfront)
      .reduce((a, c) => a + this.transactionFee(c, paypal).fee, 0) + batch_tx_fee;
    const patreon_fees =
      creators.reduce((a, c) => a + this.patreonFee(c).fee, 0);
    const total_fees = tx_fees + patreon_fees;
    const total_after_fees = total - total_fees;
    return (
      <div>
        {creators.map(creator =>
          <div key={creator.id}>
            <div className="form-group">
              <label htmlFor={`user-${creator.id}`}>Creator</label>
              <input
                id={`user-${creator.id}`}
                type="text"
                className="form-control"
                aria-label="Username"
                onChange={e => this.setState({
                  patreonCreators: [
                    { ...creator, username: e.target.value },
                    ...creators.filter(c => c.id != creator.id)
                  ]
                })}
                value={creator.username}
              />
            </div>
            <div className="form-group">
              <label className="checkbox-inline">
                <input type="checkbox"
                  name={"founding-" + creator.id}
                  name={"founding-" + creator.id}
                  checked={creator.founding}
                  onChange={e => this.setState({
                    patreonCreators: [
                      { ...creator, founding: e.target.checked },
                      ...creators.filter(c => c.id != creator.id)
                    ]
                  })}
                /> Founding creator
                {" "}
                <a
                  href="#founding-creators"
                >(?)</a>
              </label>
              <label className="checkbox-inline">
                <input type="checkbox"
                  name={"upfront-" + creator.id}
                  name={"upfront-" + creator.id}
                  checked={creator.upfront}
                  onChange={e => this.setState({
                    patreonCreators: [
                      { ...creator, upfront: e.target.checked },
                      ...creators.filter(c => c.id != creator.id)
                    ]
                  })}
                /> Charge up front
                {" "}
                <a
                  href="#charge-up-front"
                >(?)</a>
              </label>
            </div>
            <div className="form-group">
              <label className="radio-inline">
                <input type="radio"
                  name={"type-" + creator.id}
                  name={"type-" + creator.id}
                  value="lite"
                  checked={creator.plan === "lite"}
                  onChange={e => this.setState({
                    patreonCreators: [
                      { ...creator, plan: "lite" },
                      ...creators.filter(c => c.id != creator.id)
                    ]
                  })}
                /> Lite
              </label>
              <label className="radio-inline">
                <input type="radio"
                  name={"type-" + creator.id}
                  name={"type-" + creator.id}
                  value="pro"
                  checked={creator.plan === "pro"}
                  onChange={e => this.setState({
                    patreonCreators: [
                      { ...creator, plan: "pro" },
                      ...creators.filter(c => c.id != creator.id)
                    ]
                  })}
                /> Pro
              </label>
              <label className="radio-inline">
                <input type="radio"
                  name={"type-" + creator.id}
                  name={"type-" + creator.id}
                  value="premium"
                  checked={creator.plan === "premium"}
                  onChange={e => this.setState({
                    patreonCreators: [
                      { ...creator, plan: "premium" },
                      ...creators.filter(c => c.id != creator.id)
                    ]
                  })}
                /> Premium
                {" "}
                <a
                  href="#which-plan"
                >(?)</a>
              </label>
            </div>
            <div className="form-group">
              <label htmlFor="amount">Amount</label>
              <div className="input-group">
                <span className="input-group-addon">$</span>
                <input
                  type="text"
                  className="form-control"
                  aria-label="Amount"
                  onChange={e => this.setState({
                    patreonCreators: [
                      {
                        ...creator,
                        amount: parseFloat(e.target.value),
                        displayAmount: e.target.value,
                      },
                      ...creators.filter(c => c.id != creator.id)
                    ]
                  })}
                  value={creator.displayAmount}
                />
                <span className="input-group-addon">per month</span>
              </div>
            </div>
            {creator.plan === "premium" ?
              <p>
                <strong>Note</strong>: Large creators with a premium plan may
                receive a special rate.
              </p>
            : null}
          </div>
        )}
        <div className="form-group">
          <button
            className="btn btn-default"
            onClick={e => {
              e.preventDefault();
              this.setState({
                patreonCreators: [
                  ...creators,
                  {
                    id: Math.max(...creators.map(c => c.id)) + 1,
                    username: "",
                    amount: 5,
                    plan: "pro",
                    founding: false,
                    upfront: false,
                  }
                ]
              });
            }}
          >Add another creator</button>
          {creators.length > 1 && <button
            className="btn btn-default"
            style={{marginLeft: "1rem"}}
            onClick={e => {
              e.preventDefault();
              this.setState({
                patreonCreators: creators.slice(0, -1)
              });
            }}
          >Remove a creator</button>}
        </div>
        <p>
          You only pay one <strong>transaction fee</strong> between all of your
          founding creators, except for creators which use the "charge up
          front" option. You get charged a separate transaction fee for each
          non-founding creator you support, based on your pledge amount.
        </p>
        <div class="form-group">
          <label className="checkbox-inline">
            <input type="checkbox"
              name="paypal"
              checked={paypal}
              onChange={e => this.setState({ paypal: e.target.checked })}
            /> Pay with PayPal
          </label>
          <label className="checkbox-inline">
            <input type="checkbox"
              name="vat"
              checked={vat}
              onChange={e => this.setState({ vat: e.target.checked })}
            /> Pay from EU (add VAT)
          </label>
        </div>
        {vat ?
          <div className="form-group">
            <label htmlFor="country">Country</label>
            <select
              className="form-control"
              name="country"
              value={country}
              onChange={e => this.setState({ country: e.target.value })}
            >
              {Object.keys(vatRates).map(country =>
                <option value={country}>{country}</option>
              )}
            </select>
            <p>
              Unlike other fees, adding VAT increases the amount you actually
              pay, rather than subtracting more fees from your base pledge.
            </p>
          </div>
        : null}
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: "16rem" }}>You pay</th>
              <th></th>
              <th
                style={{ textAlign: "right" }}
              >${(vat ? total * vatRates[country] + total : total).toFixed(2)}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {vat ?
              <tr key={-3}>
                <td>VAT</td>
                <td>{(vatRates[country] * 100).toFixed(2)}%</td>
                <td
                  style={{ textAlign: "right" }}
                >(${(total * vatRates[country]).toFixed(2)})</td>
                <td></td>
              </tr>
            : null}
            {batch_tx_fee !== 0 ?
              <tr key={-1}>
                <td>Transaction fee (batch)</td>
                <td>{this.transactionFee(null, paypal).text}<a href="#fn:2"><sup>2</sup></a></td>
                <td
                  style={{ textAlign: "right" }}
                >(${batch_tx_fee.toFixed(2)})</td>
                <td></td>
              </tr>
            : null}
            {creators.filter(c => !c.founding || c.upfront).map(c => {
              return <tr key={c.id}>
                <td>Transaction fee ({c.username})</td>
                <td>{this.transactionFee(c, paypal).text}<a href="#fn:2"><sup>2</sup></a></td>
                <td
                  style={{ textAlign: "right" }}
                >(${this.transactionFee(c, paypal).fee.toFixed(2)})</td>
                <td></td>
              </tr>;
            })}
            <tr key={-2}>
              <th>Payment processing fees</th>
              <th style={{textAlign: "right"}}>=</th>
              <th
                style={{ textAlign: "right" }}
              >${tx_fees.toFixed(2)}</th>
              <th></th>
            </tr>
          </tbody>
        </table>
        <p>
          Patreon also charges its own fees, depending on the creator's plan
          and founder status.
        </p>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: "16rem" }}>You pay</th>
              <th></th>
              <th
                style={{ textAlign: "right" }}
              >${total.toFixed(2)}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {creators.map(c => {
              return <tr key={c.id}>
                <td>Patreon fee ({c.username})</td>
                <td>{this.patreonFee(c).text}</td>
                <td
                  style={{ textAlign: "right" }}
                >(${this.patreonFee(c).fee.toFixed(2)})</td>
                <td></td>
              </tr>;
            })}
            <tr key={-2}>
              <th>Patreon fees</th>
              <th style={{textAlign: "right"}}>=</th>
              <th
                style={{ textAlign: "right" }}
              >${patreon_fees.toFixed(2)}</th>
              <th></th>
            </tr>
          </tbody>
        </table>
        <p>
          Your total minus the transaction fees &amp; Patreon fees is
          distributed to your creators like so:
        </p>
        <table className="table">
          <tbody>
            {creators.map(c => {
              const tx_fee = this.transactionFee(c, paypal);
              if (c.founding && !c.upfront) {
                tx_fee.fee = (c.amount / batch_total) * batch_tx_fee;
              }
              const patreon_fee = this.patreonFee(c);
              const clamp = (value, min, max) =>
                Math.min(Math.max(min, value), max);
              const creator_total = c.amount - tx_fee.fee - patreon_fee.fee;
              return [
                <tr className="active" key={c.id}>
                  <th>{c.username}</th>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>,
                <tr>
                  <th>You pay</th>
                  <td></td>
                  <td
                    style={{textAlign: "right"}}
                  >${c.amount.toFixed(2)}</td>
                  <td></td>
                </tr>,
                <tr>
                  <td>Transaction fees</td>
                  <td>
                    {c.founding && !c.upfront ? '(see above)' : tx_fees.text}
                  </td>
                  <td
                    style={{textAlign: "right"}}
                  >(${tx_fee.fee.toFixed(2)})</td>
                  <td></td>
                </tr>,
                <tr>
                  <td>Patreon fees</td>
                  <td>{patreon_fee.text}</td>
                  <td
                    style={{ textAlign: "right" }}
                  >(${patreon_fee.fee.toFixed(2)})</td>
                  <td></td>
                </tr>,
                <tr>
                  <th>Creator earns</th>
                  <th></th>
                  <th
                    style={{ textAlign: "right" }}
                  >${creator_total.toFixed(2)}</th>
                  <td>per month</td>
                </tr>,
                <tr>
                  <th></th>
                  <th></th>
                  <th
                    style={{ textAlign: "right" }}
                  >{(creator_total / c.amount * 100).toFixed(0)}%</th>
                  <td>of your donation</td>
                </tr>
              ];
            })}
          </tbody>
        </table>
        <p>
          After all is said and done, of the ${total.toFixed(2)} you spend on
          Patreon, ${total_after_fees.toFixed(2)}, or
          <strong> {(total_after_fees / total * 100).toFixed(0)}%</strong> makes
          it to your creators.
        </p>
      </div>
    );
  }

  render() {
    return (
      <form className="calculator panel panel-default">
        <div className="panel-heading">
          Fee Calculator (based on 2019-05-07 fees)
        </div>
        <div className="panel-body">
          {this.renderPatreon()}
        </div>
      </form>
    );
  }
}

ReactDOM.render(<Calculator />, document.getElementById("react-root"));