import ButtonClass from "./ButtonClass.js";
import CheckboxHTML from "./CheckboxHTML.js";
import Preferences from "./Preferences.js";

export default class ConfigurationHTML {

    static CONTAINER_CLASS_NAME = 'midefos-idealista-config';
    static get CONTAINER_SELECTOR() {
        return `.${this.CONTAINER_CLASS_NAME}`;
    }

    static OPEN_CONFIG_CLASS_NAME = 'open-config';
    static get OPEN_CONFIG_SELECTOR() {
        return `.${this.OPEN_CONFIG_CLASS_NAME}`;
    }

    static SAVE_CONFIG_CLASS_NAME = 'save-config';
    static get SAVE_CONFIG_SELECTOR() {
        return `.${this.SAVE_CONFIG_CLASS_NAME}`;
    }

    static create() {
        return `
        <div class='${this.CONTAINER_CLASS_NAME}'>
            <h2>Midefos Idealista</h2>
    
            <div class='midefos-idealista-card'>
                <h3>Configuración global</h3>
                <label>
                    ${CheckboxHTML.create('enabled', Preferences.get('enabled'))}
                    <span>Habilitado</span>
                </label>

                <label>
                    ${CheckboxHTML.create('darkMode', Preferences.get('darkMode'))}
                    <span>Modo oscuro</span>
                </label>
            </div>
            
            <div class='midefos-idealista-card'>
                <h3>Precios</h3>
                <label>
                    <span>Dinero actual: </span>
                    <input type='number' id='currentMoney' value='${Preferences.get('currentMoney')}' placeholder='0'>
                </label>
        
        
                <label>
                    <span>Precio máximo: </span>
                    <input type='number' id='max-price' value='${Preferences.get('max-price')}' placeholder='0'>
                </label>
        
                <label>
                    <span>Precio máximo por metro: </span>
                    <input type='number' id='max-price-per-meter' value='${Preferences.get('max-price-per-meter')}' placeholder='0'>
                </label>


                <ul>
                    <li><strong>50 metros: </strong><span id='fiftyMetersPrice'>150000</span></li>
                    <li><strong>75 metros: </strong><span id='seventyFiveMetersPrice'>150000</span></li>
                    <li><strong>100 metros: </strong><span id='hundredMetersPrice'> 150000 </span></li>
                </ul>

                <label>
                    ${CheckboxHTML.create('percentages', Preferences.get('percentages'))}
                    <span>Calcular porcentajes</span>
                </label>
                
                <label>
                    ${CheckboxHTML.create('percentages_20', Preferences.get('percentages_20'))}
                    <span>20%</span>
                </label>
                
                <label>
                    ${CheckboxHTML.create('percentages_30', Preferences.get('percentages_30'))}
                    <span>30%</span>
                </label>
                
                <label>
                    ${CheckboxHTML.create('percentages_50', Preferences.get('percentages_50'))}
                    <span>50%</span>
                </label>
            </div>
            
            <div class='midefos-idealista-card'>
                <h3>Dispone de:</h3>
                <label>
                    ${CheckboxHTML.create('garage', Preferences.get('garage'))}
                    <span>Garaje</span>
                </label>
        
                <label>
                    ${CheckboxHTML.create('exterior', Preferences.get('exterior'))}
                    <span>Exterior</span>
                </label>
        
                <label>
                    ${CheckboxHTML.create('lift', Preferences.get('lift'))}
                    <span>Ascensor</span>
                </label>
            </div>

            <div class='midefos-idealista-card'>
                <h3>Lugar dispone de:</h3>
                
                <h4>Transporte público:</h4>
                <label>
                    ${CheckboxHTML.create('bus', Preferences.get('bus'))}
                    <span>Bus</span>
                </label>

                <label>
                    ${CheckboxHTML.create('train', Preferences.get('train'))}
                    <span>Tren</span>
                </label>

                <h4>Comercio:</h4>
                <label>
                    ${CheckboxHTML.create('supermarket', Preferences.get('supermarket'))}
                    <span>Supermercado</span>
                </label>

                <label>
                    ${CheckboxHTML.create('smoke', Preferences.get('smoke'))}
                    <span>Estanco</span>
                </label>

                <label>
                    ${CheckboxHTML.create('pharmacy', Preferences.get('pharmacy'))}
                    <span>Farmacia</span>
                </label>

                <h4>Deporte:</h4>
                <label>
                    ${CheckboxHTML.create('gym', Preferences.get('gym'))}
                    <span>Gimnasio</span>
                </label>

                <label>
                    ${CheckboxHTML.create('pool', Preferences.get('pool'))}
                    <span>Piscina</span>
                </label>
            </div>
            
            <div>
                <button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${this.SAVE_CONFIG_CLASS_NAME}'>Guardar</button>
                <button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${this.OPEN_CONFIG_CLASS_NAME}'>Cerrar</button>
            </div>
        </div>`
    }

}