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

import sharedStyles 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,
    sharedStyles,
    css`
      :host {
        display: block;
        max-width: 900px;
        margin: auto;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }
    `
  ]

  public render() {
    return html`
      <h1>-> Billing & Subscription</h1>
      This page allows you to setup how you are billed for any workspace.global charges.
      <h2>PaymentMethod</h2>
      <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>
      Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
      <h2>Subscriptions</h2>
      <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>
        Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
        To see other organization, select the respective organization at the top left of this page.
      </p>
      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
      <dees-button>Add subscription</dees-button>
      <h2>Accrued IaaS Usage</h2>
      <p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
      <h2>Upcoming Billable Items</h2>
      <h2>Past Invoices</h2>
    `;
  }
}