@php
    use App\Enums\FulfillmentChannelEnum;
    use App\Enums\ItemConditionEnum;
    use App\Enums\ConditionNotePositionEnum;
@endphp
<template x-if="settings && settings.length">
    <div class="relative overflow-x-auto">
        <table class="table-fixed w-full text-sm text-left text-gray-700">
            <tr x-show="entries.length" class="border-y">
                <th class="pl-3 py-3 w-32">入力パターン</span></th>
                <td class="pl-3 py-3">
                    <x-select-input x-model="entry" class="w-96" :options="'direct'">
                        <option value=""></option>
                        <template x-for="e in entries">
                            <option x-bind:value="e.uuid" x-text="e.name" x-bind:selected="e.uuid == entry">
                            </option>
                        </template>
                    </x-select-input>
                    <x-secondary-button x-on:click="loadEntry()" class="ml-3">
                        {{ __('読み込む') }}
                    </x-secondary-button>
                    <x-secondary-button x-on:click="listEntry()" class="ml-3">
                        {{ __('保存済み一覧') }}
                    </x-secondary-button>
                </td>
            </tr>
            <template x-for="setting in settings" :key="setting.uuid" class="">
                <tr class="border-y" x-on:change="itemChanged()">
                    <th class="pl-3 py-3 w-32"><span x-text="setting.name" class=""></span></th>
                    <td class="pl-3 py-3">
                        <template x-for="item in setting.items" :key="item.uuid" class="">
                            <p class="my-1">
                                <x-text-input x-model="setting.selected" type="radio" class="mr-1"
                                    x-bind:name="'{{ $type }}_' + setting.uuid" x-bind:id="item.uuid"
                                    x-bind:value="item.uuid" x-bind:data-condition="item.condition" />
                                <label :for="item.uuid" x-text="item.title"></label>
                            </p>
                        </template>
                    </td>
                </tr>
            </template>
            <tr class="border-y" x-on:change="calcTexts()">
                <th class="pl-3 py-3 w-32">コンディション</span></th>
                <td class="pl-3 py-3">
                    <x-select-input x-model="condition" class="w-48" :options="ItemConditionEnum::getDropdownOptions('exhibit')" />
                    ※コンディションは自動でシステムが選択してくれるため、手動で選択する必要はありません
                </td>
            </tr>
            @if ($channel == FulfillmentChannelEnum::MFN && $type == 'bulk')
                <tr class="border-y">
                    <th class="pl-3 py-3 w-32">配送パターン</span></th>
                    <td class="pl-3 py-3">
                        <x-select-input x-model="pattern" class="w-48" :options="'direct'">
                            <template x-for="p in patterns">
                                <option x-bind:value="p.uuid" x-text="p.name"
                                    x-bind:selected="p.uuid == pattern"></option>
                            </template>
                        </x-select-input>
                    </td>
                </tr>
            @endif
            <tr class="border-y">
                <th class="pl-3 py-3 w-32">文頭</span></th>
                <td class="pl-3 py-3">
                    <x-textarea x-model="texts.head" class="w-full" rows="2" readonly="true" />
                </td>
            </tr>
            <tr class="border-y">
                <th class="pl-3 py-3 w-32">商品説明文</span></th>
                <td class="pl-3 py-3">
                    <x-textarea x-model="texts.main" class="w-full" rows="10" readonly="true" />
                </td>
            </tr>
            <tr class="border-y">
                <th class="pl-3 py-3 w-32">自由記入欄</span></th>
                <td class="pl-3 py-3">
                    <x-textarea x-model="texts.free" class="w-full" rows="10" />
                </td>
            </tr>
            <tr class="border-y">
                <th class="pl-3 py-3 w-32">文末</span></th>
                <td class="pl-3 py-3">
                    <x-textarea x-model="texts.tail" class="w-full" rows="2" readonly="true" />
                </td>
            </tr>
        </table>
    </div>
</template>
<template x-if="settings && !settings.length && category">
    <p class="m-2">このカテゴリーのコンディション説明文設定が見つかりませんでした。</p>
</template>
<x-modal name="{{ $type }}-entry-add" focusable>
    <div class="p-6">
        <h2 class="text-lg font-medium text-gray-900">
            {{ __('現在の入力内容に名前を付けてください') }}
        </h2>

        <p class="mt-1 text-sm text-gray-600">
            <x-text-input x-model="entry_name" class="w-full" type="text" />
        <ul x-show="entry_name_error" class="text-sm text-red-600 space-y-1 mt-2">
            <li x-text="entry_name_error"></li>
        </ul>
        </p>

        <div class="mt-6 flex justify-end">
            <x-secondary-button x-on:click="$dispatch('close')">
                {{ __('キャンセル') }}
            </x-secondary-button>

            <x-primary-button x-on:click="addEntry()" class="ml-3">
                {{ __('保存する') }}
            </x-primary-button>
        </div>
    </div>
</x-modal>
<x-modal name="{{ $type }}-entry-list">
    <div class="p-6">
        <h2 class="text-lg font-medium text-gray-900">
            {{ __('入力パターン一覧') }}
        </h2>

        <div class="relative overflow-x-auto mt-6 max-h-[70vh]">
            <table class="table-fixed w-full text-sm text-left text-gray-700">
                <thead>
                    <tr class="text-xs text-gray-700 uppercase bg-gray-200">
                        <th class="pl-3 py-3 w-10"></th>
                        <th class="pl-3 py-3">入力パターン名</th>
                        <th class="pl-3 py-3 w-32"></th>
                    </tr>
                </thead>
                <tbody class="entry_list" x-on:end="entryListSorted($event);">
                    <template x-for="entry in entries" :key="entry.uuid" class="">
                        <tr class="border-b hover:bg-gray-100" x-bind:data-uuid="entry.uuid">
                            <td class="pl-3 py-3 text-center">
                                <x-heroicon-o-bars-3 class="cursor-pointer" />
                            </td>
                            <td class="pl-3 py-3">
                                <span x-show="!entry.renaming" class="underline cursor-pointer" x-text="entry.name" x-on:click="startRename(entry)" title="{{ _('パターン名の変更') }}"></span>
                                <div x-show="entry.renaming" class="flex gap-x-1 items-center relative">
                                    <x-text-input x-model="entry.newName" class="w-full h-[34px]" type="text" />
                                    <x-secondary-button x-on:click="cancelRename(entry)" class="break-keep h-[34px]">
                                        {{ __('戻る') }}
                                    </x-secondary-button>
                                    <x-primary-button x-on:click="rename(entry)" class="break-keep h-[34px]">
                                        {{ __('保存') }}
                                    </x-primary-button>
                                </div>
                            </td>
                            <td class="pl-3 py-3">
                                <x-danger-button x-on:click="removeEntryConfirm(entry)" class="ml-3">
                                    {{ __('削除する') }}
                                </x-danger-button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <div class="mt-6 flex justify-end">
            <x-secondary-button x-on:click="$dispatch('close')">
                {{ __('閉じる') }}
            </x-secondary-button>
        </div>
    </div>
</x-modal>
<script>
    if (!window.getConditionNoteGeneratorBase) {
        window.getConditionNoteGeneratorBase = {};
    }
    window.getConditionNoteGeneratorBase['{{ $type }}'] = function() {
        return {
            category: null,
            settings: null,
            condition: null,
            pattern: null,
            patterns: [],
            positional: [],
            texts: {
                head: '',
                main: '',
                free: '',
                tail: '',
            },
            entry_name: '',
            entry_name_error: '',
            entries: [],
            entry: null,

            init() {},

            async categoryChanged(elem) {
                const url = '{{ route('exhibit.condition_note_settings', [$channel, $type]) }}';
                const response = await jsonPost(url, {
                    body: JSON.stringify({
                        category: this.category
                    })
                });

                response.json().then((data) => {
                    this.settings = data.settings;
                    this.patterns = data.shipping_ways;
                    this.positional = data.positional;
                    this.entries = data.entries;
                    this.entry = null;
                    this.settings.forEach((setting, index) => {
                        if (!setting.selected && setting.items.length) {
                            setting.selected = setting.items[0].uuid;
                        }
                    });
                    this.texts.free = '';
                    this.itemChanged();
                }).catch(() => {
                    this.modal = {
                        title: 'エラー',
                        body: 'エラーが発生しました'
                    };
                    this.$dispatch('open-modal', 'alert');
                });
            },

            getSelectedItem(setting) {
                if (setting.selected) {
                    let items = setting.items.filter((item) => {
                        return item.uuid == setting.selected;
                    });
                    if (items.length) {
                        return items[0];
                    }
                }
                return null;
            },

            calcCondition() {
                let condition = -1;
                this.settings.forEach((setting, index) => {
                    let item = this.getSelectedItem(setting);
                    if (item) {
                        condition = Math.max(item.condition, condition);
                    }
                });
                if (condition > 0) {
                    this.condition = condition;
                }
            },

            calcTexts() {
                let positional = this.positional.filter((p) => {
                    return p.condition == this.condition || p.condition == {{ ItemConditionEnum::ALL }};
                });

                // 文頭の計算
                {
                    let _positional = positional.filter((p) => {
                        return p.position == {{ ConditionNotePositionEnum::HEAD }};
                    });
                    this.texts.head = _positional.reduce((prev, cur) => {
                        return prev + '\n' + cur.note.trim();
                    }, '').trim();
                }

                // 文末の計算
                {
                    let _positional = positional.filter((p) => {
                        return p.position == {{ ConditionNotePositionEnum::TAIL }};
                    });
                    this.texts.tail = _positional.reduce((prev, cur) => {
                        return prev + '\n' + cur.note.trim();
                    }, '').trim();
                }

                // 商品説明文の計算
                this.texts.main = this.settings.reduce((prev, cur) => {
                    let item = this.getSelectedItem(cur);
                    if (item && item.body) {
                        return prev + '\n' + item.body.trim();
                    } else {
                        return prev;
                    }
                }, '').trim();
            },

            itemChanged() {
                this.calcCondition();
                this.calcTexts();
            },

            showAddEntryModal() {
                this.entry_name = '';
                this.entry_name_error = '';
                this.$dispatch('open-modal', '{{ $type }}-entry-add');
            },

            async addEntry() {
                let settings = this.settings.map((setting) => {
                    return {
                        uuid: setting.uuid,
                        selected: setting.selected
                    };
                });

                const url = '{{ route('exhibit.add_entry', [$channel, $type]) }}';
                const response = await jsonPost(url, {
                    body: JSON.stringify({
                        category: this.category,
                        name: this.entry_name,
                        data: {
                            settings: settings,
                            condition: this.condition,
                            pattern: this.pattern,
                            texts: this.texts
                        }
                    })
                });

                response.json().then((data) => {
                    if (data.success) {
                        this.entries = data.entries;
                        this.$dispatch('close');
                    } else {
                        this.entry_name_error = data.message;
                    }
                }).catch(() => {
                    this.modal = {
                        title: 'エラー',
                        body: 'エラーが発生しました'
                    };
                    this.$dispatch('open-modal', 'alert');
                });
            },

            getSelectedEntry() {
                let entries = this.entries.filter((ent) => {
                    return ent.uuid == this.entry;
                });
                if (entries.length) {
                    return entries[0];
                }
                return null;
            },

            loadEntry() {
                let entry = this.getSelectedEntry();
                if (!entry) {
                    return;
                }

                let selecteds = {};
                entry.data.settings.forEach((setting) => {
                    selecteds[setting.uuid] = setting.selected ? setting.selected : null;
                });

                this.settings.map((setting) => {
                    setting.selected = selecteds[setting.uuid];
                });

                this.texts.free = entry.data.texts.free;

                // 一括の場合のみ配送パターンを復元する
                @if ($type == 'bulk')
                    this.pattern = entry.data.pattern;
                @endif;

                this.itemChanged();

                // コンディションだけ自動計算後に上書きする(実際の操作でも自動計算後に手動で変更できるため)
                this.condition = entry.data.condition;
            },

            listEntry() {
                let table = this.$root.querySelector('.entry_list');
                let sortable = Sortable.create(table, {
                    handle: 'svg',
                    animation: 150,
                    swapThreshold: 0.1,
                    ghostClass: 'bg-blue-200',
                    onEnd(evt) {
                        // sortable で並び替えすると DOM の順番が変わってしまう(が alpinejs のほうのデータの並びには影響を与えない)。
                        // alpinejs 側で並び順を管理したいが
                        // DOM の順番が変わっていると alpinejs 側のデータの並びが正しく表示されない。
                        // そのため sortable 側では DOM の入れ替えをしないようにする(入れ替え後すぐ元に戻すようにする)。
                        const items = evt.from.querySelectorAll(':scope > tr');
                        evt.from.insertBefore(evt.item, items[evt.oldIndex + (evt.oldIndex > evt
                            .newIndex)]);
                        return false;
                    }
                });
                this.$dispatch('open-modal', '{{ $type }}-entry-list');
            },

            entryListSorted(evt) {
                this.entries.forEach((entry, index) => {
                    entry.order = index;
                });

                // まず、データの並びを変えないまま order の値を適切に付け替える
                if (evt.oldIndex < evt.newIndex) {
                    this.entries.forEach((entry, index) => {
                        if (entry.order > evt.oldIndex && entry.order <= evt.newIndex) {
                            // oldIndex より大きく newIndex 以下のものをデクリメントする
                            entry.order--;
                        } else if (entry.order == evt.oldIndex) {
                            // oldIndex を newIndex にする
                            entry.order = evt.newIndex;
                        }
                    });
                } else {
                    this.entries.forEach((entry, index) => {
                        if (entry.order < evt.oldIndex && entry.order >= evt.newIndex) {
                            // oldIndex より小く newIndex 以上のものをインクリメントする
                            entry.order++;
                        } else if (entry.order == evt.oldIndex) {
                            // oldIndex を newIndex にする
                            entry.order = evt.newIndex;
                        }
                    });
                }

                // 次に実際にソートする(これで画面に反映される)
                this.entries.sort((a, b) => {
                    if (a.order == b.order) {
                        return 0;
                    }
                    return (a.order < b.order) ? -1 : 1;
                });

                this.saveEntries();
            },

            removeEntryConfirm(entry) {
                this.modal = {
                    title: entry.name + ' を削除しますか？',
                    body: '削除すると元に戻すことはできません',
                    yes: () => {
                        this.removeEntry(entry);
                        this.saveEntries();
                    }
                };
                this.$dispatch('open-modal', 'confirm');
            },

            async removeEntry(entry) {
                this.entries = this.entries.filter((ent) => {
                    return ent.uuid != entry.uuid;
                });
                if (!this.entries.length) {
                    this.$dispatch('close');
                }
            },

            startRename(entry) {
                entry.newName = entry.name;
                entry.renaming = true;
            },

            cancelRename(entry) {
                this.cancelRenameAll();
            },

            cancelRenameAll() {
                this.entries.forEach((e) => {
                    delete e.renaming;
                    delete e.newName;
                });
            },

            async rename(entry) {
                entry.name = entry.newName;
                this.saveEntries();
            },
            
            async saveEntries() {
                this.cancelRenameAll();

                const url = '{{ route('exhibit.save_entries', [$channel, $type]) }}';
                const response = await jsonPost(url, {
                    body: JSON.stringify({
                        category: this.category,
                        entries: this.entries
                    })
                });

                response.json().then((data) => {
                    this.entries = data.entries;
                }).catch(() => {
                    this.modal = {
                        title: 'エラー',
                        body: 'エラーが発生しました'
                    };
                    this.$dispatch('open-modal', 'alert');
                });
            }
        };
    };
</script>