import { css, html, LitElement } from 'lit'
import { customElement, property } from 'lit/decorators.js'

import { i18next } from '@operato/i18n'

@customElement('partner-info-card')
export class PartnerInfoCard extends LitElement {
  static styles = [
    css`
      input {
        border: var(--border-dark-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        background-color: transparent;
        font: var(--input-font);

        flex: 1;
      }
      #vendors {
        display: flex;
        max-height: 45vh;
        flex-direction: row;
        background-color: var(--theme-white-color);
        margin: 0;
        padding: 0;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        overflow: hidden;
      }
      [field-2column] {
        overflow: auto;
        flex: 1;
        background-color: var(--theme-white-color);
        padding: var(--padding-default);
        border-radius: var(--border-radius);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 15px;
        clear: both;
        max-width: var(--input-container-max-width);
      }
      [field] {
        display: flex;
        flex-direction: column;
        padding-bottom: var(--padding-default);
      }
      label {
        display: flex;
        flex-direction: column;

        font: var(--label-font);
        color: var(--label-color);
        text-transform: var(--label-text-transform);
      }
      @media screen and (max-width: 480px) {
        [field] {
          grid-column: span 2;
        }
      }
    `
  ]

  @property({ type: Object }) partner: any

  render() {
    const partner = this.partner || {}

    return html`
      <div id="vendors">
        <div field-2column>
          <div field>
            <label
              >${i18next.t('label.name')}
              <input type="text" name="name" readonly .value=${partner.name || ''} />
            </label>
          </div>

          <div field>
            <label
              >${i18next.t('label.description')}
              <input type="text" name="description" readonly .value=${partner.description || ''} />
            </label>
          </div>
        </div>
      </div>
    `
  }
}
