dees-catalog/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts

import { html } from '@design.estate/dees-element';
import type { DeesAppuiBottombar } from './dees-appui-bottombar.js';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => {
  return html`
    <dees-demowrapper>
      <style>
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          background: #1a1a1a;
        }

        .demo-section {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .demo-label {
          font-size: 12px;
          color: #737373;
          font-family: 'Geist Sans', sans-serif;
        }

        .demo-bottombar-wrapper {
          border: 1px solid hsl(0 0% 20%);
          border-radius: 4px;
          overflow: hidden;
        }
      </style>
      <div class="demo-container">
        <div class="demo-section">
          <div class="demo-label">Bottom bar with status widgets and actions</div>
          <div class="demo-bottombar-wrapper">
            <dees-appui-bottombar
              id="demo-bottombar"
            ></dees-appui-bottombar>
          </div>
        </div>

        <div class="demo-section">
          <div class="demo-label">Controls</div>
          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
            <button onclick="addSuccessWidget()">Add Success Widget</button>
            <button onclick="addWarningWidget()">Add Warning Widget</button>
            <button onclick="addErrorWidget()">Add Error Widget</button>
            <button onclick="addLoadingWidget()">Add Loading Widget</button>
            <button onclick="addRightWidget()">Add Right Widget</button>
            <button onclick="addAction()">Add Action</button>
            <button onclick="clearAll()">Clear All</button>
          </div>
        </div>
      </div>
      <script type="module">
        const bottombar = document.getElementById('demo-bottombar');

        // Wait for component to initialize
        await bottombar.updateComplete;

        // Add initial widgets
        bottombar.addWidget({
          id: 'status',
          iconName: 'lucide:activity',
          label: 'System Online',
          status: 'success',
          tooltip: 'All systems operational',
          onClick: () => console.log('Status clicked'),
          contextMenuItems: [
            { name: 'View Details', iconName: 'lucide:info', action: () => alert('System details') },
            { divider: true },
            { name: 'Refresh Status', iconName: 'lucide:refreshCw', action: () => alert('Refreshing...') },
          ],
        });

        bottombar.addWidget({
          id: 'notifications',
          iconName: 'lucide:bell',
          label: '3 notifications',
          status: 'warning',
          tooltip: 'You have unread notifications',
          onClick: () => console.log('Notifications clicked'),
        });

        bottombar.addWidget({
          id: 'version',
          iconName: 'lucide:gitBranch',
          label: 'v1.2.3',
          tooltip: 'Current version',
          position: 'right',
          onClick: () => console.log('Version clicked'),
        });

        // Add initial actions
        bottombar.addAction({
          id: 'settings',
          iconName: 'lucide:settings',
          tooltip: 'Settings',
          position: 'right',
          onClick: () => alert('Settings clicked'),
        });

        bottombar.addAction({
          id: 'help',
          iconName: 'lucide:helpCircle',
          tooltip: 'Help',
          position: 'right',
          onClick: () => alert('Help clicked'),
        });

        // Demo control functions
        let widgetCounter = 0;
        let actionCounter = 0;

        window.addSuccessWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'success-' + widgetCounter,
            iconName: 'lucide:checkCircle',
            label: 'Success ' + widgetCounter,
            status: 'success',
            tooltip: 'Success widget',
            onClick: () => bottombar.removeWidget('success-' + widgetCounter),
          });
        };

        window.addWarningWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'warning-' + widgetCounter,
            iconName: 'lucide:alertTriangle',
            label: 'Warning ' + widgetCounter,
            status: 'warning',
            tooltip: 'Warning widget',
            onClick: () => bottombar.removeWidget('warning-' + widgetCounter),
          });
        };

        window.addErrorWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'error-' + widgetCounter,
            iconName: 'lucide:xCircle',
            label: 'Error ' + widgetCounter,
            status: 'error',
            tooltip: 'Error widget',
            onClick: () => bottombar.removeWidget('error-' + widgetCounter),
          });
        };

        window.addLoadingWidget = () => {
          widgetCounter++;
          const id = 'loading-' + widgetCounter;
          bottombar.addWidget({
            id: id,
            iconName: 'lucide:loader2',
            label: 'Loading...',
            status: 'active',
            loading: true,
            tooltip: 'Loading in progress',
          });

          // Simulate completion after 3 seconds
          setTimeout(() => {
            bottombar.updateWidget(id, {
              iconName: 'lucide:check',
              label: 'Done!',
              status: 'success',
              loading: false,
            });
          }, 3000);
        };

        window.addRightWidget = () => {
          widgetCounter++;
          bottombar.addWidget({
            id: 'right-' + widgetCounter,
            iconName: 'lucide:info',
            label: 'Right ' + widgetCounter,
            position: 'right',
            onClick: () => bottombar.removeWidget('right-' + widgetCounter),
          });
        };

        window.addAction = () => {
          actionCounter++;
          bottombar.addAction({
            id: 'action-' + actionCounter,
            iconName: 'lucide:zap',
            tooltip: 'Action ' + actionCounter,
            onClick: () => {
              alert('Action ' + actionCounter + ' clicked');
              bottombar.removeAction('action-' + actionCounter);
            },
          });
        };

        window.clearAll = () => {
          bottombar.clearWidgets();
          bottombar.clearActions();
          widgetCounter = 0;
          actionCounter = 0;
        };
      </script>
    </dees-demowrapper>
  `;
};