<?php

namespace OxygenApp\Views\Frontend\Content;
if (!defined('ABSPATH')) exit;

use OxygenApp\Views\IView;
use OxygenApp\Views\BaseView;
use OxygenApp\Utils\LanguagesHelper;
use OxygenApp\Utils\FrontendData;
use OxygenApp\Enums\FrontendDataType;

class NewUserPlaylist extends BaseView implements IView
{
    public function render(): void
    {
        $new_playlist_title = LanguagesHelper::getInstance()->getLangLabel('new_playlist_title');
        
        $new_playlist_placeholder = LanguagesHelper::getInstance()->getLangLabel('new_playlist_placeholder');
        $save_playlist_btn_label = LanguagesHelper::getInstance()->getLangLabel('save_playlist_btn_label');
        $select_playlist_background_btn_label = LanguagesHelper::getInstance()->getLangLabel('select_playlist_background_btn_label');
        $clear_playlist_background_btn_label = LanguagesHelper::getInstance()->getLangLabel('clear_playlist_background_btn_label');
        $new_playlist_info = LanguagesHelper::getInstance()->getLangLabel('new_playlist_info');

        $routes = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY)['routes'] ?? [];
        $myPlaylistsRouteHash = $routes['my_playlists']['hash'] ?? '';

        ?>
        <div class="absolute inset-0 w-full h-full top-0 left-0 z-[8] p-4 white-popup hidden newplaylist-ui">
            <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 bg-black/20 white-popup pupup-background-ui"></div>
            
            <div class="bg-black z-20 bg-opacity-20 backdrop-blur-lg p-5 pt-2 rounded-lg relative shadow-lg left-[0%] md:left-[100px] top-[10%] md:top-[20%] 
                        sm:max-w-[100%] md:max-w-[70%] max-h-[85%] md:max-h-[65%] flex flex-col opacity-0 transition-opacity duration-1000 ease-out popup-content new-playlist-ui">

                <div>
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-white popup-title"><?php echo esc_html($new_playlist_title) ?></h2>
                        <a href="#<?php echo esc_attr($myPlaylistsRouteHash) ?>" class="text-white text-2xl leading-none close-btn">&times;</a>
                    </div>
                    
                    <div class="flex items-center">
                        <div class="mt-2 mr-2 inline-flex items-center gap-2 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200
                                    hover:bg-opacity-60 focus-within:bg-opacity-30 active:bg-opacity-80">
                            <input type="text" placeholder="<?php echo esc_attr($new_playlist_placeholder) ?>" maxlength="20" class="bg-transparent outline-none text-gray-300 text-sm w-full placeholder-gray-400 playlist_name">
                        </div>

                        <a href="#" class="mt-2 mr-5 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200
                        hover:bg-opacity-60 focus:bg-opacity-30 disabled:bg-opacity-20 disabled:cursor-not-allowed active:bg-opacity-80
                        inline-flex items-center gap-2 btn-disabled save-playlist-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
                        </svg>
                        <?php echo esc_html($save_playlist_btn_label) ?>
                        </a>

                        <a href="#" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200
                        hover:bg-opacity-60 focus:bg-opacity-30 active:bg-opacity-80
                        inline-flex items-center gap-2 select-playlist-background-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
                        </svg>
                        <?php echo esc_html($select_playlist_background_btn_label) ?>
                        </a>

                        <a href="#" class="mt-2 bg-black bg-opacity-30 text-gray-300 text-sm rounded-full px-4 py-1 transition duration-200
                        hover:bg-opacity-60 focus:bg-opacity-30 active:bg-opacity-80
                        items-center gap-2 relative pr-10 hidden clear-playlist-background-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"></path>
                        </svg>
                        <?php echo esc_html($clear_playlist_background_btn_label) ?>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        </a>
                    </div>
                </div>

                <div class="errors mt-2">
                    <p class="text-white text-sm mb-5 no-playlists">
                        <?php echo esc_html($new_playlist_info) ?>
                    </p>
                </div>

                <div class="flex-1 overflow-y-auto mt-2 scrollbar-custom">
                    <div class="pb-5 pt-4 content"></div>
                </div>
            </div>

        </div>


        <?php
    }
}