<script>
    import { useTinyRouter } from 'svelte-tiny-router';

    import { api }           from '../../urls.svelte.js';
    import { error, yikes }  from '../../warn.svelte';
    import { t }             from '../../translations.svelte.js';

    import CompanySelector   from '../../Components/CompanySelector.svelte';
    import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
    import Tags              from '../tags/TagList.svelte';

    let ready        = $derived(!!project.name.trim())
    const router     = useTinyRouter();
    let showSettings = $state(false);

    let project = $state({
        name        : '',
        description : { source : '', rendered : '' },
        settings    : { show_closed:false },
        tags        : []
    });

    async function onsubmit(ev){
        ev.preventDefault();
        const url = api('project');
        var resp  = await fetch(url,{
            credentials : 'include',
            method      : 'POST',
            body        : JSON.stringify(project)
        });
        if (resp.ok){
            var newProject = await resp.json();
            router.navigate(`/project/${newProject.id}/view`);
        } else {
            error(resp);
        }
    }

    function onselect(company){
        project.company_id = company.id;
    }

    function toggleSettings(ev){
        ev.preventDefault();
        showSettings = !showSettings;
    }
</script>

<style>
    label{ display: block }
</style>

<form {onsubmit}>
    <fieldset>
        <legend>
            {t('create_new_project')}
        </legend>
        <fieldset>
            <legend>{t('basic_data')}</legend>
            <table>
                <tbody>
                    <tr>
                        <th>
                            {t('company_optional')}
                        </th>
                        <td>
                            <CompanySelector caption={t('no_company')} {onselect} />
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {t('Name')}
                        </th>
                        <td>
                            <input type="text" bind:value={project.name}/>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {t('description')}
                        </th>
                        <td>
                            <MarkdownEditor bind:value={project.description} simple={true} />
                        </td>
                    </tr>
                    {#if showSettings}
                    <tr>
                        <th>
                            {t('settings')}
                        </th>
                        <td>
                            <label>
                                <input type="checkbox" bind:checked={project.settings.show_closed} />
                                {t('display_closed_tasks')}
                            </label>
                        </td>
                    </tr>
                    {:else}
                    <tr>
                        <th>
                            {t('settings')}
                        </th>
                        <td>
                            <button onclick={toggleSettings} >{t('extended_settings')}</button>
                        </td>
                    </tr>
                    {/if}
                    <tr>
                        <th>
                            {t('tags')}
                        </th>
                        <td>
                            <Tags module="project" bind:tags={project.tags} />
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <button type="submit" disabled={!ready}>{t('create')}</button>
    </fieldset>
</form>