module IHP.IDE.SchemaDesigner.View.Columns.New where

import IHP.ViewPrelude
import IHP.IDE.SchemaDesigner.Types
import IHP.IDE.ToolServer.Types
import IHP.IDE.ToolServer.Routes ()
import IHP.IDE.SchemaDesigner.View.Layout
import IHP.IDE.SchemaDesigner.View.Columns.Edit (typeSelector)
import Text.Countable (singularize)

data NewColumnView = NewColumnView
    { statements :: [Statement]
    , tableName :: Text
    , tableNames :: [Text]
    , enumNames :: [Text]
    }

instance View NewColumnView where
    html NewColumnView { .. } = [hsx|
        <div class="row no-gutters bg-white" id="schema-designer-viewer">
            {renderObjectSelector (zip [0..] statements) (Just tableName)}
            {renderColumnSelector tableName  (zip [0..] columns) statements}
        </div>
        {migrationStatus}
        {renderModal modal}
    |]
        where
            table = findStatementByName tableName statements
            columns = maybe [] ((.columns) . unsafeGetCreateTable) table

            modalContent = [hsx|
                {renderFlashMessages}
                <form method="POST" action={CreateColumnAction} id="new-column">
                    <input type="hidden" name="tableName" value={tableName}/>

                    <div class="form-group">
                        <input
                            id="colName"
                            name="name"
                            type="text"
                            class="form-control"
                            autofocus="autofocus"
                            placeholder="Name"
                            data-table-name-singular={singularize tableName}
                            />
                    </div>

                    <div class="form-group">
                        {typeSelector Nothing enumNames}
                        <div class="mt-1 text-muted" id="column-options">
                            {generateReferenceCheckboxes}
                            <div class="d-flex">
                                <div class="custom-control custom-checkbox">
                                    <input id="allowNull" type="checkbox" name="allowNull" class="mr-1 custom-control-input"/>
                                    <label class="custom-control-label mr-2" for="allowNull">
                                        Nullable
                                    </label>
                                </div>

                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" id="isUnique" name="isUnique" class="mr-1 custom-control-input"/>
                                    <label class="mx-2 custom-control-label" for="isUnique">
                                        Unique
                                    </label>
                                </div>

                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" name="primaryKey" id="primaryKey" class="mr-1 custom-control-input"/>
                                    <label class="mx-2 custom-control-label" for="primaryKey">
                                        Primary Key
                                    </label>
                                </div>

                                <div class="custom-control custom-checkbox">
                                    <input id="isArray" type="checkbox" name="isArray" class="mr-1 custom-control-input"/>
                                    <label class="mx-2 custom-control-label" for="isArray">
                                        Array Type
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        {defaultSelector}
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Create Column</button>
                    </div>

                    <input type="hidden" name="primaryKey" value={inputValue False}/>
                    <input type="hidden" name="allowNull" value={inputValue False}/>
                    <input type="hidden" name="isUnique" value={inputValue False}/>
                    <input type="hidden" name="isArray" value={inputValue False}/>
                    <input type="hidden" name="isReference" value={inputValue False}/>
                    <input type="hidden" name="referenceTable" value=""/>
                </form>
            |]
                where
                    generateReferenceCheckboxes = forEach tableNames checkbox
                        where
                            checkbox tableName = [hsx|
                            <div>
                                <div class="custom-control custom-checkbox ref" style="display: none;" data-attribute={(singularize tableName) <> "_id"} data-table={tableName} >
                                    <input id={"checkbox-ref-" <> tableName} type="checkbox" name="isReference" class="mr-1 custom-control-input"/>
                                    <label for={"checkbox-ref-" <> tableName} class="mx-2 custom-control-label" id="refText">
                                        References {tableName}
                                    </label>
                                </div>
                            </div>
                            |]
                    defaultSelector = [hsx|
                        <select id="defaultSelector" name="defaultValue" class="form-control select2">
                            <option value="" selected={True}>no default</option>
                            <option value="''">""</option>
                        </select>
                    |]
            modalFooter = mempty
            modalCloseUrl = pathTo ShowTableAction { tableName }
            modalTitle = "New Column"
            modal = Modal { modalContent, modalFooter, modalCloseUrl, modalTitle }