import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import type { DeesInputToggle } from './dees-input-toggle.js';

export const demoFunc = () => html`
  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
    // Example of programmatic interaction
    const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
    const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
    const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');

    if (toggleAllOnBtn && toggleAllOffBtn) {
      toggleAllOnBtn.addEventListener('click', () => {
        featureToggles.forEach((toggle: DeesInputToggle) => {
          if (!toggle.disabled && !toggle.required) {
            toggle.value = true;
          }
        });
      });

      toggleAllOffBtn.addEventListener('click', () => {
        featureToggles.forEach((toggle: DeesInputToggle) => {
          if (!toggle.disabled && !toggle.required) {
            toggle.value = false;
          }
        });
      });
    }
  }}>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1200px;
          margin: 0 auto;
        }

        dees-panel {
          margin-bottom: 24px;
        }

        dees-panel:last-child {
          margin-bottom: 0;
        }

        .toggle-group {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .horizontal-toggles {
          display: flex;
          gap: 32px;
          flex-wrap: wrap;
        }

        .interactive-section {
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 8px;
          padding: 16px;
          margin-top: 16px;
        }

        .output-text {
          font-family: monospace;
          font-size: 13px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
          padding: 8px;
          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
          border-radius: 4px;
          min-height: 24px;
        }

        .settings-section {
          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
          border-radius: 8px;
          padding: 20px;
        }

        .button-group {
          display: flex;
          gap: 8px;
          margin-bottom: 16px;
        }

        .feature-toggles {
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 6px;
          padding: 16px;
        }

        .section-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 16px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
        }

        .drag-hint {
          font-size: 12px;
          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
          margin-top: 8px;
          font-style: italic;
        }
      `}
    </style>

    <div class="demo-container">
      <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
        <div class="toggle-group">
          <dees-input-toggle
            .label=${'Enable feature'}
            .value=${false}
            .key=${'basic'}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Active toggle'}
            .value=${true}
            .key=${'active'}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'With description'}
            .value=${false}
            .description=${'This toggle has additional helper text explaining its purpose'}
            .key=${'withDesc'}
          ></dees-input-toggle>
        </div>
        <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
      </dees-panel>

      <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
        <div class="toggle-group">
          <dees-input-toggle
            .label=${'Default (off)'}
            .value=${false}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Enabled (on)'}
            .value=${true}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Disabled (off)'}
            .value=${false}
            .disabled=${true}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Disabled (on)'}
            .value=${true}
            .disabled=${true}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Required (always on)'}
            .value=${true}
            .required=${true}
            .description=${'This toggle cannot be turned off'}
          ></dees-input-toggle>
        </div>
      </dees-panel>

      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
        <div class="horizontal-toggles">
          <dees-input-toggle
            .label=${'WiFi'}
            .value=${true}
            .layoutMode=${'horizontal'}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Bluetooth'}
            .value=${false}
            .layoutMode=${'horizontal'}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'GPS'}
            .value=${true}
            .layoutMode=${'horizontal'}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'NFC'}
            .value=${false}
            .layoutMode=${'horizontal'}
          ></dees-input-toggle>
        </div>
      </dees-panel>

      <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
        <div class="settings-section">
          <h4 class="section-title">Notification Settings</h4>

          <div class="toggle-group">
            <dees-input-toggle
              .label=${'Push notifications'}
              .value=${true}
              .description=${'Receive push notifications on your device'}
              .key=${'push'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Email notifications'}
              .value=${true}
              .description=${'Get important updates via email'}
              .key=${'email'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Sound'}
              .value=${false}
              .description=${'Play a sound for notifications'}
              .key=${'sound'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Vibration'}
              .value=${true}
              .description=${'Vibrate for notifications'}
              .key=${'vibration'}
            ></dees-input-toggle>
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
        <div class="button-group">
          <dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
          <dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
        </div>

        <div class="feature-toggles">
          <div class="toggle-group">
            <dees-input-toggle
              .label=${'Dark Mode'}
              .value=${true}
              .key=${'darkMode'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Auto-save'}
              .value=${true}
              .key=${'autoSave'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Spell check'}
              .value=${false}
              .key=${'spellCheck'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Developer mode'}
              .value=${false}
              .key=${'devMode'}
            ></dees-input-toggle>

            <dees-input-toggle
              .label=${'Beta features'}
              .value=${false}
              .key=${'beta'}
            ></dees-input-toggle>
          </div>
        </div>
      </dees-panel>

      <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
        <div class="toggle-group">
          <dees-input-toggle
            .label=${'Airplane mode'}
            .value=${false}
            @newValue=${(event: CustomEvent) => {
              const output = document.querySelector('#airplane-output');
              if (output) {
                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
              }
            }}
          ></dees-input-toggle>

          <dees-input-toggle
            .label=${'Do not disturb'}
            .value=${false}
            @newValue=${(event: CustomEvent) => {
              const output = document.querySelector('#dnd-output');
              if (output) {
                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
              }
            }}
          ></dees-input-toggle>
        </div>

        <div class="interactive-section">
          <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
          <div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;