import React, { Component } from 'react'
import FormExtended, { FormExtendedProps, FormExtendedState } from '@hubleto/react-ui/ext/FormExtended';
import Table, { TableProps, TableState } from '@hubleto/react-ui/core/Table';

interface Form{{ modelSingularForm }}Props extends FormExtendedProps { }
interface Form{{ modelSingularForm }}State extends FormExtendedState { }

export default class Form{{ modelSingularForm }}<P, S> extends FormExtended<Form{{ modelSingularForm }}Props, Form{{ modelSingularForm }}State> {
  static defaultProps: any = {
    ...FormExtended.defaultProps,
    model: '{{ appNamespaceForwardSlash }}/Models/{{ modelSingularForm }}'
  }

  props: Form{{ modelSingularForm }}Props;
  state: Form{{ modelSingularForm }}State;

  translationContext: string = '{{ appNamespaceDoubleBackslash }}';
  translationContextInner: string = 'Components\\Form{{ modelSingularForm }}';

  constructor(props: Form{{ modelSingularForm }}Props) {
    super(props);
  }

  getStateFromProps(props: Form{{ modelSingularForm }}Props) {
    return {
      ...super.getStateFromProps(props),
      tabs: [
        { uid: 'default', title: <b>{this.translate('{{ modelSingularForm }}')}</b> },
        // Add your tabs here.
        // 'tab_with_nested_table': { title: 'Example tab with nested table' }
      ]
    };
  }

  getEndpointParams(): any {
    return {
      ...super.getEndpointParams(),
    }
  }

  getRecordFormUrl(): string {
    return '{{ modelPluralFormKebab }}/' + (this.state.record.id > 0 ? this.state.record.id : 'add');
  }

  renderTitle(): JSX.Element {
    const R = this.state.record;
    return <>
      <small>{this.translate('{{ model }}')}</small>
      <h2>{R.id <= 0 ? this.translate('New') : R.id}</h2>
    </>;
  }

  renderTab(tabUid: string) {
    const R = this.state.record;

    switch (tabUid) {
      case 'default':
        return super.renderTab(tabUid);
      break;
    }

  }

}
