<?php

namespace OxygenApp\Views\Admin\Settings\Languages;
if ( ! defined( 'ABSPATH' ) ) exit;

use OxygenApp\Config\Config;
use OxygenApp\Views\BaseView;
use OxygenApp\Views\IView;
use OxygenApp\Utils\OptionUtils;
use OxygenApp\Views\Helpers\Forms;
use OxygenApp\Views\Modal\ModalNewLanguage;
use OxygenApp\Config\DefaultLabels;
use OxygenApp\Config\Flags;
use OxygenApp\Utils\LanguageSyncHelper;

class FeLanguages extends BaseView implements IView
{

    public function render(): void
    {
        $options_group = OptionUtils::OPTION_GROUP_SLUG;
        $languahesMetaKey = Config::getInstance()->getSetting('languages_meta_key');

        $mergedLanguages = LanguageSyncHelper::getMergedLanguages();

        $langs = $mergedLanguages ?? OptionUtils::getInstance()->getOption($languahesMetaKey);

        $defaultLanguage = DefaultLabels::getDefaultLanguage();
        $baseFlagsUrl = Flags::getBaseURL();
    ?>
    <div class="row">
        <div class="col-md-12 mb-4">
            <button type="button" id="add_new_lang_btn" class="btn btn-outline-primary"><?php echo esc_html__('Add new language', 'oxyleaf-app-working-and-relaxing-app') ?></button>
        </div>
        <div class="row">
            <div class="col-md-12">

                <div class="accordion" id="langs-accordion">
                    
                    <?php if (is_array($langs)): ?>
                        <?php $c = 0; ?>
                        <?php foreach ($langs as $langCode => $dta): ?>
                            <?php
                            $labels = $dta['labels'] ?? [];
                            $rtl = $dta['rtl'] ?? null;
                            $langData = Flags::findLangByCode($langCode);
                            $flagIcon = $langData['flag_4x3'] ?? '';
                            ?>
                            <div class="accordion-item <?php echo $c === 0 ? esc_attr('main-lang') : '' ?>" data-lang="<?php echo esc_html($langCode) ?>">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_<?php echo esc_attr($c) ?>" aria-expanded="true" aria-controls="collapse_<?php echo esc_attr($c) ?>">
                                        <span class="skl-flag" style="width: 30px"><img style="max-height: 15px;" src="<?php echo esc_url($baseFlagsUrl . $flagIcon) ?>" alt=""></span>
                                        <span class="skl-code-upper"><?php echo esc_html(strtoupper($langCode)) ?></span>
                                    </button>
                                </h2>
                                <div id="collapse_<?php echo esc_attr($c) ?>" class="accordion-collapse collapse <?php echo $c === 0 ? esc_attr('show') : '' ?>" data-bs-parent="#langs-accordion">
                                    <div class="mx-3 my-2 d-flex align-items-center justify-content-between gap-3 mt-4">
                                        <?php
                                        Forms::renderCheckbox([
                                            'name' => "{$options_group}[{$languahesMetaKey}][{$langCode}][rtl]",
                                            'value' => 'on',
                                            'label' => esc_html__('Enable RTL (Right to left)', 'oxyleaf-app-working-and-relaxing-app'),
                                            'checked' => $rtl
                                        ]);
                                        ?>
                                        <div class="lang-navs">
                                            <button type="button" class="btn btn-outline-primary btn-sm skl-change-lang" style="margin-right: 10px;"><?php echo esc_html_e('Change language', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                            <?php if ($c > 0): ?>
                                                <button type="button" class="btn btn-outline-danger btn-sm skl-delete-lang"><?php echo esc_html_e('Delete language', 'oxyleaf-app-working-and-relaxing-app') ?></button>  
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <div class="mx-3 my-3">
                                        <?php if (is_array($labels)): ?>
                                            <?php
                                            foreach ($labels as $labelName => $value) {
                                                $labelData = DefaultLabels::getLabelDataFromName($labelName);
                                                $name = $labelData['name'] ?? '';
                                                $label = $labelData['label'] ?? '';
                                                $info = $labelData['info'] ?? '';
                                                $placeholder = $labelData['placeholder'] ?? '';
                                                $value = isset($value) ? $value : '';
                                                Forms::renderInputText([
                                                    'label' => $label,
                                                    'info' => $info,
                                                    'placeholder' => $placeholder, 
                                                    'name' => "{$options_group}[{$languahesMetaKey}][{$langCode}][labels][{$name}]",
                                                    'value' => $value, 
                                                ]);
                                            }
                                            ?>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            <?php $c++; ?>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <?php
                            $langCode = $defaultLanguage['code'] ?? '';
                            $defaultLabels = $defaultLanguage['labels'] ?? '';
                            $rtl = $defaultLanguage['rtl'] ?? '';
                            $langData = Flags::findLangByCode($langCode);
                            $flagIcon = $langData['flag_4x3'] ?? '';
                        ?>
                        <div class="accordion-item main-lang" data-lang="<?php echo esc_html($langCode) ?>">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
                                    <div class="d-flex align-items-center">
                                        <span class="skl-flag" style="width: 30px"><img style="max-height: 15px;" src="<?php echo esc_url($baseFlagsUrl . $flagIcon) ?>" alt=""></span>
                                        <span class="skl-code-upper"><?php echo esc_html(strtoupper($langCode)) ?></span>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapse_1" class="accordion-collapse collapse show" data-bs-parent="#langs-accordion">

                                <div class="mx-3 my-2 d-flex align-items-center justify-content-between gap-3 mt-4">
                                    <?php
                                    Forms::renderCheckbox([
                                        'name' => "{$options_group}[{$languahesMetaKey}][{$langCode}][rtl]",
                                        'value' => 'on',
                                        'label' => esc_html__('Enable RTL (Right to left)', 'oxyleaf-app-working-and-relaxing-app'),
                                        'checked' => $rtl
                                    ]);
                                    ?>
                                    <div class="lang-navs">
                                        <button type="button" class="btn btn-outline-primary btn-sm skl-change-lang" style="margin-right: 10px;"><?php echo esc_html_e('Change language', 'oxyleaf-app-working-and-relaxing-app') ?></button>
                                    </div>
                                </div>

                                <div class="mx-3 my-3">
                                    <?php foreach ($defaultLabels as $key => $labelData): ?>
                                        <?php
                                        $name = $labelData['name'] ?? '';
                                        $label = $labelData['label'] ?? '';
                                        $info = $labelData['info'] ?? '';
                                        $placeholder = $labelData['placeholder'] ?? '';
                                        $value = $labelData['value'] ?? '';
                                        ?>
                                        <?php Forms::renderInputText([
                                            'label' => $label,
                                            'info' => $info,
                                            'placeholder' => $placeholder, 
                                            'name' => "{$options_group}[{$languahesMetaKey}][{$langCode}][labels][{$name}]",
                                            'value' => $value, 
                                        ]) ?>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            <div class="col-md-12 mt-3">
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-outline-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-floppy" viewBox="0 0 16 16">
                            <path d="M11 2H9v3h2V2Z"></path>
                            <path d="M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0ZM1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5Zm3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4v4.5ZM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V15Z"></path>
                        </svg>
                        <?php echo esc_html__('Save', 'oxyleaf-app-working-and-relaxing-app') ?>
                    </button>
                </div>
            </div>
        </div>
    <?php

        (new ModalNewLanguage())->render();
    }
}