import { createBaseStructure } from "../../components/card-structure.js";
import { addActions } from "../../tools/tap-actions.js";
import { getButtonType } from "./helpers.js";
import styles from "./styles.css";

export function createStructure(context, appendTo = context.container) {
    const cardType = 'button';
    const buttonType = getButtonType(context);
    const isSlider = buttonType === 'slider';
    const actions = {};

    actions['switch'] = {
        button: {
            tap_action: { action: "toggle" },
            double_tap_action: { action: "toggle" },
            hold_action: { action: "more-info" }
        }
    };

    actions['state'] = {
        button: {
            tap_action: { action: "more-info" },
            double_tap_action: { action: "more-info" },
            hold_action: { action: "more-info" }
        }
    };

    actions['name'] = {
        button: {
            tap_action: { action: "none" },
            double_tap_action: { action: "none" },
            hold_action: { action: "none" }
        },
        icon: {
            tap_action: { action: "none" },
            double_tap_action: { action: "none" },
            hold_action: { action: "none" }
        }
    };

    const elements = createBaseStructure(context, {
        type: cardType,
        appendTo: appendTo,
        styles: styles,
        withSlider: isSlider,
        withFeedback: !isSlider,
        iconActions: actions[buttonType]?.icon,
        buttonActions: actions[buttonType]?.button,
    });

    // Add backward compatibility
    elements.background.classList.add('bubble-button-background');
    elements.mainContainer.classList.add('bubble-button-card-container');
    elements.cardWrapper.classList.add('bubble-button-card');

    if (appendTo !== context.container) {
        context.buttonType = buttonType;
    } else {
        context.cardType = cardType;
    }
}

import { createElement, toggleEntity, throttle, forwardHaptic, isEntityType } from "../tools/utils.js";
import { addActions, addFeedback } from "../tools/tap-actions.js";
import { createSliderStructure } from "../components/slider.js";
import styles from "./styles.css";

const processedStylesCache = {};

export function createBaseStructure(context, config = {}) {
    context.elements = context.elements || {};
    
    const defaults = {
        type: 'base',
        appendTo: context.content,
        baseCardStyles: styles,
        styles: '',
        withFeedback: true,
        withImage: true,
        withCustomStyle: true,
        withState: true,
        withBackground: true,
        iconActions: false,
        buttonActions: false
    };
    const options = { ...defaults, ...config };

    context.elements.mainContainer = createElement('div', `bubble-${options.type}-container bubble-container`);
    context.elements.cardWrapper = createElement('div', `bubble-${options.type} bubble-wrapper`);
    context.elements.contentContainer = createElement('div', 'bubble-content-container');
    context.elements.buttonsContainer = createElement('div', 'bubble-buttons-container');

    context.elements.iconContainer = createElement('div', 'bubble-icon-container icon-container');
    context.elements.icon = createElement('ha-icon', 'bubble-icon icon');
    context.elements.image = createElement('div', 'bubble-entity-picture entity-picture');
    
    context.elements.nameContainer = createElement('div', 'bubble-name-container name-container');
    context.elements.name = createElement('div', 'bubble-name name');
    context.elements.state = createElement('div', 'bubble-state state');

    if(options.withBackground) {
        context.elements.background = createElement('div', 'bubble-background');
        context.elements.cardWrapper.prepend(context.elements.background);
    }

    context.elements.iconContainer.append(
        context.elements.icon,
        options.withImage ? context.elements.image : null
    );

    context.elements.nameContainer.append(
        context.elements.name,
        options.withState ? context.elements.state : null
    );

    context.elements.contentContainer.append(
        context.elements.iconContainer,
        context.elements.nameContainer
    );

    context.elements.cardWrapper.append(
        context.elements.contentContainer, 
        context.elements.buttonsContainer
    );

    if (options.withFeedback) {
        context.elements.feedbackContainer = createElement('div', 'bubble-feedback-container feedback-container');
        context.elements.feedback = createElement('div', 'bubble-feedback-element feedback-element');
        context.elements.feedback.style.display = 'none';
        context.elements.feedbackContainer.append(context.elements.feedback);
        context.elements.cardWrapper.append(context.elements.feedbackContainer);
        addFeedback(context.elements.background, context.elements.feedback);    
    }

    context.elements.mainContainer.appendChild(context.elements.cardWrapper);

    if (options.withSlider) {
        createSliderStructure(context);
    }

    if (options.styles) {
      if (!processedStylesCache[options.type]) {
        // Replace 'card-type' in CSS variables with the real card type
        processedStylesCache[options.type] = options.baseCardStyles.replace(/card-type/g, options.type);
      }

      context.elements.style = createElement('style');
      context.elements.style.innerText = processedStylesCache[options.type] + options.styles;
      context.elements.mainContainer.appendChild(context.elements.style);
    }
    
    if (options.withCustomStyle) {
        context.elements.customStyle = createElement('style');
        context.elements.mainContainer.appendChild(context.elements.customStyle);
    }

    if (options.iconActions === true) {
        addActions(context.elements.iconContainer, context.config);
    } else if (options.iconActions !== false) {
        addActions(context.elements.iconContainer, context.config, context.config.entity, options.iconActions);
    }

    if (options.buttonActions === true) {
        addActions(context.elements.background, context.config.button_action, context.config.entity);
    } else if (options.buttonActions !== undefined) {
        addActions(context.elements.background, context.config.button_action, context.config.entity, options.buttonActions);
    }

    if (options.appendTo === context.content) {
        context.content.appendChild(context.elements.mainContainer);
    } else {
        options.appendTo.appendChild(context.elements.mainContainer);
    }

    return context.elements;
}

let volumeLevel = 0;

export function createStructure(context) {
    const cardType = 'media-player';

    const elements = createBaseStructure(context, {
        type: cardType,
        withFeedback: false,
        styles: styles
    });

    elements.mediaInfoContainer = createElement('div', 'bubble-media-info-container');
    elements.playPauseButton = createElement('ha-icon', 'bubble-play-pause-button');
    elements.previousButton = createElement('ha-icon', 'bubble-previous-button');
    elements.previousButton.setAttribute("icon", "mdi:skip-previous");
    elements.nextButton = createElement('ha-icon', 'bubble-next-button');
    elements.nextButton.setAttribute("icon", "mdi:skip-next");
    elements.volumeButton = createElement('ha-icon', 'bubble-volume-button');
    elements.volumeButton.setAttribute("icon", "mdi:volume-high");
    elements.powerButton = createElement('ha-icon', 'bubble-power-button');
    elements.powerButton.setAttribute("icon", "mdi:power-standby");
    elements.muteButton = createElement('ha-icon', 'bubble-mute-button is-hidden');
    elements.muteButton.setAttribute("icon", "mdi:volume-off");
    elements.title = createElement('div', 'bubble-title');
    elements.artist = createElement('div', 'bubble-artist');

    // Add backward compatibility
    elements.background.classList.add('bubble-cover-background');

    elements.iconContainer.appendChild(elements.muteButton);
    elements.mediaInfoContainer.append(elements.title, elements.artist);
    elements.contentContainer.append(elements.mediaInfoContainer);
    elements.buttonsContainer.append(
        elements.powerButton,
        elements.previousButton,
        elements.nextButton,
        elements.volumeButton,
        elements.playPauseButton
    );

    addActions(elements.icon, context.config, context.config.entity);
    addActions(elements.image, context.config, context.config.entity);

    elements.volumeSliderContainer = createElement('div', 'bubble-volume-slider is-hidden');
    createSliderStructure(context, {
        targetElement: elements.volumeSliderContainer,
        sliderLiveUpdate: false,
        withValueDisplay: true,
    });

    elements.cardWrapper.appendChild(elements.volumeSliderContainer);

    elements.volumeButton.addEventListener('click', () => {
        elements.volumeSliderContainer.classList.toggle('is-hidden');
        elements.muteButton.classList.toggle('is-hidden');
        elements.icon.classList.toggle('is-hidden');
        elements.image.classList.toggle('is-hidden');
        changeVolumeIcon(context);
    });

    elements.powerButton.addEventListener('click', () => {
        const isOn = isStateOn(context);
        context._hass.callService('media_player', isOn ? 'turn_off' : 'turn_on', {
            entity_id: context.config.entity
        });
    });

    elements.muteButton.addEventListener('click', () => {
        const isVolumeMuted = getAttribute(context, "is_volume_muted") === true;
        context._hass.callService('media_player', 'volume_mute', {
            entity_id: context.config.entity,
            is_volume_muted: !isVolumeMuted
        });
        elements.muteButton.clicked = true;
    });

    elements.previousButton.addEventListener('click', () => {
        context._hass.callService('media_player', 'media_previous_track', {
            entity_id: context.config.entity
        });
    });

    elements.nextButton.addEventListener('click', () => {
        context._hass.callService('media_player', 'media_next_track', {
            entity_id: context.config.entity
        });
    });

    elements.playPauseButton.addEventListener('click', () => {
        context._hass.callService('media_player', 'media_play_pause', {
            entity_id: context.config.entity
        });
        elements.playPauseButton.clicked = true;
    });

    elements.mainContainer.addEventListener('click', () => forwardHaptic("selection"));

    context.cardType = cardType;
}