import {
  html,
  css,
  LitElement
} from "https://cdn.skypack.dev/lit@2.0.0-rc.2?dts";
import {
  customElement,
  property,
  state
} from "https://cdn.skypack.dev/lit@2.0.0-rc.2/decorators.js";

interface Product {
  image: string;
  name: string;
  description?: string;
  price: number;
  quantity: number;
  id: number;
}

const products: Product[] = [
  {
    id: 98456,
    image:
      "https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&h=500&q=80",
    name: "Laptop",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id varius nisl. Duis feugiat placerat est, a dignissim sapien dictum nec. Suspendisse eu ante eget nulla tempor tempor. Suspendisse ac nunc sollicitudin, eleifend nulla quis, pharetra enim. Pellentesque viverra tristique bibendum. Praesent vulputate at risus nec tempor. Praesent lorem neque, accumsan eget faucibus non, aliquam a purus. Aenean posuere massa vel lobortis tincidunt. Quisque bibendum varius laoreet. Nam dictum erat odio, a luctus lectus cursus a. Nam scelerisque turpis in nibh tempus, ac gravida justo lobortis. ",
    price: 2105.25,
    quantity: 3
  },
  {
    id: 65486,
    image:
      "https://images.unsplash.com/photo-1589578228447-e1a4e481c6c8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&h=500&q=80",
    name: "Keyboard",
    description:
      "Duis feugiat placerat est, a dignissim sapien dictum nec. Suspendisse eu ante eget nulla tempor tempor. Suspendisse ac nunc sollicitudin, eleifend nulla quis, pharetra enim. Pellentesque viverra tristique bibendum. Praesent vulputate at risus nec tempor. Praesent lorem neque, accumsan eget faucibus non, aliquam a purus. Aenean posuere massa vel lobortis tincidunt. Quisque bibendum varius laoreet. Nam dictum erat odio",
    price: 140.73,
    quantity: 2
  },
  {
    id: 5546,
    image:
      "https://images.unsplash.com/photo-1569696863868-45f498a50ef1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fGhlYWRwaG9uZXN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&h=500&q=60",
    name: "Headphones",
    description:
      "Praesent lorem neque, accumsan eget faucibus non, aliquam a purus. Aenean posuere massa vel lobortis tincidunt. Quisque bibendum varius laoreet. Nam dictum erat odio",
    price: 140.73,
    quantity: 2
  }
];

@customElement("shopping-cart")
export class ShoppingCart extends LitElement {
  static styles = css`
    :host {
      --shopping-cart-spacer: 0.75em;
    }
    
    .wrapper {
      container-type: inline-size;
    }

    input {
      font-size: 1rem;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      text-align: left;
    }

    th,
    td {
      border-bottom: 1px solid var(--gray);
      padding: calc(var(--shopping-cart-spacer) / 1);
    }

    td:first-child,
    th:first-child {
      padding-inline-start: 0;
    }

    td:last-child,
    th:last-child {
      padding-inline-end: 0;
    }

    tfoot tr:last-child td,
    tfoot tr:last-child th {
      border-bottom: 0;
    }

    .image-cell {
      display: none;
    }

    .image {
      max-width: 6em;
      max-height: 6em;
    }

    .content-cell {
      width: 100%;
    }

    .title {
      display: block;
    }

    .description {
      display: none;
      line-height: 1.5;
    }

    .unit-price-cell,
    .subtotal-cell {
      text-align: right;
    }

    .total-price-label {
      text-align: right;
    }

    .total-price-value {
      text-align: right;
      font-size: 1.25em;
      font-weight: 800;
    }

    @container (min-width: 500px) {
      :host {
        --shopping-cart-spacer: 1.5em;
      }

      .image-cell {
        display: table-cell;
      }

      .total-price-value {
        font-size: 1.5em;
      }
    }

    @container (min-width: 1050px) {
      .image {
        max-width: 12em;
        max-height: 12em;
      }

      .title {
        font-size: 1.5em;
        margin-bottom: 0.375em;
      }

      .description {
        display: block;
      }
    }
  `;

  @property()
  products: Product[] = products;

  @property()
  vat: number = 0.21;

  get totalPrice() {
    return this.products.reduce((acc, product) => {
      return acc + this.getProductSubTotal(product);
    }, 0);
  }

  getProductSubTotal(product: Product) {
    return product.quantity * product.price;
  }

  formatPrice(price: number) {
    return new Intl.NumberFormat("nl-BE", {
      style: "currency",
      currency: "EUR"
    }).format(price);
  }

  handleQuantityChange(event: InputEvent, productId: number) {
    const value = Number((event.composedPath()[0] as HTMLInputElement).value);
    const changedProductIndex = this.products.findIndex(
      ({ id }) => id === productId
    );

    if (changedProductIndex !== -1) {
      this.products[changedProductIndex] = {
        ...this.products[changedProductIndex],
        quantity: value
      };
    }

    this.requestUpdate();
  }

  render() {
    return html`
      <div class="wrapper">
        <table class="products">
          <thead>
            <tr>
              <th>Product</th>
              <th class="image-cell"></th>
              <th>Quantity</th>
              <th class="unit-price-cell">Price</th>
              <th class="subtotal-cell">Subtotal</th>
            </tr>
          </thead>
          <tbody>
            ${products.map(
              (product) => html`
                <tr>
                  <td class="image-cell">
                    <img
                      src="${product.image}"
                      alt="${product.name}"
                      class="image"
                    />
                  </td>
                  <td class="content-cell">
                    <strong class="title">${product.name}</strong>
                    <div class="description">${product.description}</div>
                  </td>
                  <td>
                    <input
                      class="product-quantity-input"
                      value="${product.quantity}"
                      type="number"
                      id="${product.name}_quantity"
                      name="${product.name}_quantity"
                      min="0"
                      max="100"
                      @input="${(e) => this.handleQuantityChange(e, product.id)}"
                    />
                  </td>
                  <td class="unit-price-cell">
                    ${this.formatPrice(product.price)}
                  </td>
                  <td class="subtotal-cell">
                    ${this.formatPrice(this.getProductSubTotal(product))}
                  </td>
                </tr>
              `
            )}
          </tbody>
          <tfoot>
            <tr>
              <th class="image-cell"></th>
              <th colspan="3" class="total-price-label">Total price</th>
              <td class="total-price-value">
                ${this.formatPrice(this.totalPrice)}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    `;
  }
}

@customElement("shopping-cart-toggle")
export class ShoppingCartToggle extends LitElement {
  static styles = css`
    .dropdown {
      position: relative;
    }

    .dropdown-content {
      position: absolute;
      inset-block-start: calc(100% + 0.5rem);
      inset-inline-end: -0.5em;
      background-color: var(--light);
      color: var(--dark);
      padding: calc(var(--spacer) / 2) var(--spacer);
      box-shadow: var(--box-shadow);
      z-index: 1;
      inline-size: 29rem;
    }

    button {
      -webkit-appearance: none;
      padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2);
      border: 1px solid var(--link-color);
      background: transparent;
      color: var(--light);
      font-weight: 800;
      font-size: 1rem;
      cursor: pointer;
    }

    button:hover,
    button:focus {
      background-color: var(--light);
      color: var(--primary);
    }
  `;

  @state()
  protected isOpen = false;

  handleDropdownToggle() {
    this.isOpen = !this.isOpen;
    this.requestUpdate();
  }

  render() {
    return html`
      <div class="dropdown">
        <button @click="${this.handleDropdownToggle}">
          <slot name="toggle" />
        </button>
        ${this.isOpen
          ? html`
              <div class="dropdown-content">
                <slot name="content"></slot>
              </div>
            `
          : ""}
      </div>
    `;
  }
}