// imports
import React, { useState, useEffect } from 'react';

// locals
import Input from '../Input';
import Button from '../Button';
import Overlay from '../Overlay';
import ApiSignal from '../../signals/Api';
import useTeam from '../../hooks/useTeam';
import Signal, { useSignal } from '../../signal';

// open
export const agent         = new Signal.State(null);
export const remove        = new Signal.State(null);
export const onAgentUpdate = new Signal.State(null);

/**
 * component agent modal
 *
 * @param props 
 */
const ComponentAgentModal = (props = {}) => {
  // signals
  const [api] = useSignal(ApiSignal);
  const [sAgent, setAgent] = useSignal(agent);

  // team
  const team = useTeam();

  // state
  const [prompt, setPrompt] = useState('');
  const [saving, setSaving] = useState(false);

  // on save
  const onSave = async () => {
    // save agent
    if (saving) return;

    // set saving
    setAgent({
      ...sAgent,
      prompt,
    });
    setSaving(true);

    // try/catch
    try {
      // save agent
      const result = await api.Agent[sAgent?.id ? 'update' : 'create']({
        ...sAgent,
        prompt,
        team : team?.id,
      });

      // set agent value
      setAgent(result.agent);

      // on change1
      if (props.onChange) props.onChange(sAgent);
    } catch (e) {
      // log
      console.error(e);
    } finally {
      // set saving
      setSaving(false);
    }
  };

  // use effect
  useEffect(() => {
    setPrompt(sAgent?.prompt || '');
  }, [sAgent?.prompt]);

  // return jsx
  return (
    <Overlay
      open={!!sAgent}
      title={sAgent?.name || api.translate('agent:dialog.title', 'Create Agent')}
      onClose={() => setAgent(null)}
      subtitle={api.translate('agent:dialog.subtitle', 'Create a new agent')}
    >
      <Input
        name="name"
        type="text"
        label={api.translate('agent:form.name.label', 'Name')}
        value={sAgent?.name || ''}
        onChange={(e) => setAgent({ ...sAgent, name : e.target.value })}
        placeholder={api.translate('agent:form.name.placeholder', 'Agent Name')}
      />
      
      <Input
        name="prompt"
        type="textarea"
        label={api.translate('agent:form.prompt.label', 'Prompt')}
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder={api.translate('agent:form.prompt.placeholder', 'Agent Prompt')}

        minRows={6}
      />

      
      
      <div className="pt-4 sm:pt-6 sm:flex sm:flex-row-reverse">
        <Button
          color="primary"
          onClick={onSave}
        >
          {saving ? api.translate('agent:button.loading', 'Loading...') : api.translate('agent:button.submit', 'Submit')}
        </Button>
        <Button
          color="transparent"
          onClick={() => setAgent(null)}
        >
          {api.translate('agent:button.cancel', 'Cancel')}
        </Button>
      </div>
    </Overlay>
  )
};

/**
 * export component agent modal
 */
export default ComponentAgentModal;