import { TemplateResult, html } from 'lit';
import NileSlider from './nile-slider';
import { classMap } from 'lit/directives/class-map.js';
import { valueToPercent } from './utils/nile-slider.utils';

const tooltipDisabled = (nileSlider: NileSlider): boolean =>
  nileSlider.disabled || nileSlider.valueLabel !== 'tooltip';

export const rangeSlider = (nileSlider: NileSlider): TemplateResult => {
  return html`
    <div>
      <nile-tooltip
        content=${nileSlider.rangeOneValue}
        placement=${nileSlider.tooltipPosition}
        ?disabled=${tooltipDisabled(nileSlider)}
      >
        <div 
          id="range-one" 
          class="range-button"
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${nileSlider.minValue}
          aria-valuemax=${nileSlider.maxValue}
          aria-valuenow=${nileSlider.rangeOneValue}
          aria-label="Minimum value"
        ></div>
      </nile-tooltip>
      <nile-tooltip
        content=${nileSlider.rangeTwoValue}
        placement=${nileSlider.tooltipPosition}
        ?disabled=${tooltipDisabled(nileSlider)}
      >
        <div
          id="range-two"
          class="range-button-two"
          part="range-button-two"
          role="slider"
          tabindex="0"
          aria-valuemin=${nileSlider.minValue}
          aria-valuemax=${nileSlider.maxValue}
          aria-valuenow=${nileSlider.rangeTwoValue}
          aria-label="Maximum value"
        ></div>
      </nile-tooltip>
    </div>
  `;
};

export const singleSlider = (nileSlider: NileSlider): TemplateResult => {
  return html`
    <div>
      <nile-tooltip
        content=${nileSlider.value}
        placement=${nileSlider.tooltipPosition}
        ?disabled=${tooltipDisabled(nileSlider)}
      >
        <div 
          class=${classMap({
            'range-button': true,
            'range-button-active': nileSlider.activeThumb === 'one',
          })} 
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${nileSlider.minValue}
          aria-valuemax=${nileSlider.maxValue}
          aria-valuenow=${nileSlider.value}
          aria-label=${nileSlider.ariaLabel || nileSlider.label || "Slider value"}
        ></div>
      </nile-tooltip>
    </div>
  `;
};


export const lableContaier = (nileSlider: NileSlider): TemplateResult => {
  return html`
    <div part="label-container" class="label-container">
      <span id="label-start">${nileSlider.labelStart}</span>
      <span id="label-end">${nileSlider.labelEnd}</span>
    </div>
  `;
};


export const fieldHeader = (nileSlider: NileSlider): TemplateResult => {
  return html`
    <div part="field-header" class="field-header">
      <label id="field-label" part="field-label" class="field-label">
        ${nileSlider.label}
      </label>
    </div>
  `;
};


export const bottomValueLabels = (nileSlider: NileSlider): TemplateResult => {
  if (!nileSlider.rangeSlider) {
    return html`
      <span
        part="value-label"
        class="value-label"
        style="left: ${valueToPercent(nileSlider.value, nileSlider)}%"
      >${nileSlider.value}</span>
    `;
  }
  return html`
    <span
      part="value-label"
      class="value-label"
      style="left: ${valueToPercent(nileSlider.rangeOneValue, nileSlider)}%"
    >${nileSlider.rangeOneValue}</span>
    <span
      part="value-label"
      class="value-label"
      style="left: ${valueToPercent(nileSlider.rangeTwoValue, nileSlider)}%"
    >${nileSlider.rangeTwoValue}</span>
  `;
};