import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
} from '@design.estate/dees-element';

import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';

import * as state from '../../../states/accountstate.js';

declare global {
  interface HTMLElementTagNameMap {
    'lele-accountview-subscription': SubscriptionView;
  }
}

@customElement('lele-accountview-subscription')
export class SubscriptionView extends DeesElement {

  @property({
    type: Array,
  })
  accessor subscriptions: any[] = [{
    organization: 'org1',
    'subscription type': 'workspace.global SaaS',
    price: '4€',
    userFactor: 4,
    total: '16.00€'
  }, {
    organization: 'org1',
    'subscription type': 'workspace.global IaaS Base Access',
    price: '0€',
    userFactor: 4,
    total: '0€'
  }, {
    organization: 'org1',
    'subscription type': 'workspace.global SLA Senior',
    price: '2000€',
    userFactor: 'none',
    total: '2000.00€'
  }];

  public static styles = [
    cssManager.defaultStyles,
    accountDesignTokens,
    cardStyles,
    typographyStyles,
    css`
      :host {
        display: block;
        padding: 48px;
        max-width: 900px;
        margin: 0 auto;
      }

      .section {
        margin-bottom: 48px;
      }

      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 24px;
        margin-top: 16px;
      }

      h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--foreground);
        margin: 24px 0 8px 0;
      }

      dees-table {
        margin-top: 16px;
      }

      dees-button {
        margin-top: 16px;
      }
    `
  ]

  public render() {
    return html`
      <h1>Billing & Subscription</h1>
      <p>Manage your billing settings and subscriptions for your organization.</p>

      <div class="section">
        <h2>Payment Method</h2>
        <div class="card">
          <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
          and we will bill any occurring charges as an extra on the monthly date of your choosing.
          Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>

          <h3>Paddle</h3>
          <dees-button @click=${async () => {
            await this.domtoolsPromise;
            this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
          }}>Set up Paddle.com</dees-button>

          <h3>Enterprise Billing</h3>
          <p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
          <p><em>Note: You are currently not eligible.</em></p>
        </div>
      </div>

      <div class="section">
        <h2>Subscriptions</h2>
        <div class="card">
          <p>
            The total price of a subscription already includes all taxes. If you are a VAT registered business,
            the actual price might be cheaper in case you can claim VAT exemption from the purchase.
          </p>
          <p>
            <em>Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.</em>
          </p>
          <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
          <dees-button>Add Subscription</dees-button>
        </div>
      </div>

      <div class="section">
        <h2>Accrued IaaS Usage</h2>
        <div class="card">
          <p>The accrued IaaS Usage will be charged by adjusting the workspace.global IaaS Postpaid Access price prior to the renewal date.</p>
          <dees-table .heading1=${'Usage'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
        </div>
      </div>

      <div class="section">
        <h2>Upcoming Billable Items</h2>
        <div class="card">
          <p>No upcoming billable items.</p>
        </div>
      </div>

      <div class="section">
        <h2>Past Invoices</h2>
        <div class="card">
          <p>No past invoices available.</p>
        </div>
      </div>
    `;
  }
}