import $ from "jquery";
import * as JSX from './jsx';
import * as API from "./api";
import * as user from "./user";
import * as util from "./util";

import { Page, GroupBox, Spinner, Dropdown, DropdownItem } from './components';

export default function Models() {
  if( !API.models.length ) {
    const modelTimeout = () => {
      if( API.models.length )
        JSX.navigateSilent( "/models" );
      else
        setTimeout( modelTimeout, 100 );
    }

    modelTimeout();

    return <Page>
      <div>
        <Spinner />
      </div>
    </Page>
  }

  let model = API.models[0].name;
  if( user.is_loggedin && user.settings.site_prefs && user.settings.site_prefs.model )
    model = user.settings.site_prefs.model!;

  return <Page>
    <GroupBox title="Models" style="width: 85%">
      <div id="selector-wrapper">
        <Dropdown title={ model } id="model-selector" inline>
          { API.models.map( ( m ) => <DropdownItem onclick={ changeModel }>{ m.name }</DropdownItem> ) }
        </Dropdown>
      </div>

      <div id="model-list"><ModelInfo model={ API.getModelFromName( model ) } /></div>
    </GroupBox>
  </Page>
}

function changeModel( e: Event ) {
  const el = $( e.target );
  const txt = el.text();
  console.log( txt );
  const m = API.getModelFromName( txt );
  console.log( m );

  $( "#model-list" ).children().replaceWith(
    <ModelInfo model={ m } />
  );

  $( "#model-selector" ).text( m.name );
}


function ModelInfo( props: any ) {
  const m = props.model as API.Model;
  return <div class="model-item">
    <div class="model-header" style="text-align: left">
      <h2 style="padding: 0px 10px 20px; margin: 0;">
        { m.name }
      </h2>
    </div>
    <div class="model-body">
      <div class="model-capabilities">
        <span class={ m.capabilities.web    ? "green" : "red" }>Web           { m.capabilities.web ? '✔' : '✘' }</span>
        <span class={ m.capabilities.notes  ? "green" : "red" }>Notes         { m.capabilities.notes ? '✔' : '✘' }</span>
        <span class={ m.capabilities.vision ? "green" : "red" }>Vision        { m.capabilities.vision ? '✔' : '✘' }</span>
        <span class={ m.capabilities.remind ? "green" : "red" }>Memory Lookup { m.capabilities.remind ? '✔' : '✘' }</span>
      </div>
      <div class="model-description">
        { m.description.full }
      </div>
      <div id="model-license-wrapper"></div>
      <br />
    </div>
    <ModelLicense>
      { util.escapeHtml( m.license ) }
    </ModelLicense>
  </div>;
}

let license_open = false;
function ModelLicense( props: any ) {
  const collapseToggle = () => {
    const el = $( "#model-license" );
    let list  = el.find( '.tool-call-list' );
    let btn   = el.find( '.tool-call-collapse' );

    license_open = list.css( 'display' ) == 'block';
    if( !license_open ) {
      list.css( 'display', 'block' );
      btn.text( '-' );
    } else {
      list.css( 'display', 'none' );
      btn.text( '+' );
    }
  };

  let el = <div class='tool-call' id="model-license" onclick={ collapseToggle }>
      <div class='tool-call-title-wrapper'>
        <span class='tool-call-title'>License</span>
        <span class='tool-call-collapse'>{ license_open ? '-' : '+' }</span>
      </div>
      <div class='tool-call-list' style={ `display: ${ license_open ? 'block' : 'none' }; white-space: pre-line; text-align: left` }>
        { props.children }
      </div>
    </div>;

  return el;
}