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

    import { api, post }           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){
        if (ev) ev.preventDefault();
        const url = api('project');
        var resp  = await post(url,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>

<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={null} bind:tags={project.tags} onEmptyCommit={onsubmit} />
                    </td>
                </tr>
            </tbody>
        </table>
    </fieldset>
    <button onclick={onsubmit} disabled={!ready}>{t('create')}</button>
</fieldset>
