import { createKeyValueSection } from './key-value-section';
import { loadValidationRuleModal } from '../../components/validation-rule-modal/validation-rule-modal';
import Services from '../../services/service';

export async function getProcessCreation(container: HTMLElement) {
  await loadValidationRuleModal();

  container.style.display = 'block';
  container.innerHTML = `<div class="parameter-header">Process Creation</div>`;
  const privateSec = createKeyValueSection('Private Data', 'private-section');
  const publicSec = createKeyValueSection('Public Data', 'public-section');
  const rolesSec = createKeyValueSection('Roles', 'roles-section', true);

  container.appendChild(privateSec.element);
  container.appendChild(publicSec.element);
  container.appendChild(rolesSec.element);

  const btn = document.createElement('button');
  btn.textContent = 'Create Process';
  btn.style.cssText = `
    display: block;
    margin: 2rem auto 0;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    background-color: #4f46e5;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
  `;

  btn.onclick = async () => {
    const privateData = privateSec.getData();
    const publicData = publicSec.getData();
    const roles = rolesSec.getData();

    console.log('Private:', privateData);
    console.log('Public:', publicData);
    console.log('Roles:', roles);

    const service = await Services.getInstance();

    const createProcessResult = await service.createProcess(privateData, publicData, roles);
    const processId = createProcessResult.updated_process!.process_id;
    const stateId = createProcessResult.updated_process!.current_process.states[0].state_id;
    await service.handleApiReturn(createProcessResult);

    // Now we want to validate the update and register the first state of our new process
    const updateProcessResult = await service.createPrdUpdate(processId, stateId);
    await service.handleApiReturn(createProcessResult);

    const approveChangeResult = await service.approveChange(processId, stateId);
    await service.handleApiReturn(approveChangeResult);
  };

  container.appendChild(btn);
}