import { css, cssManager } from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';

export const datepickerStyles = [
    ...DeesInputBase.baseStyles,
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        position: relative;
      }

      .input-container {
        position: relative;
        width: 100%;
      }

      .date-input {
        width: 100%;
        height: 40px;
        padding: 0 12px;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.5;
        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
        cursor: pointer;
        transition: all 0.2s ease;
        outline: none;
        font-family: inherit;
      }

      .date-input::placeholder {
        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
      }

      .date-input:hover:not(:disabled) {
        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
      }

      .date-input:focus,
      .date-input.open {
        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')},
                    0 0 0 4px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
      }

      .date-input:disabled {
        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
        cursor: not-allowed;
        opacity: 0.5;
      }

      .icon-container {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 12px;
        pointer-events: none;
      }

      .icon-container > * {
        pointer-events: auto;
      }

      .calendar-icon {
        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .clear-button {
        width: 20px;
        height: 20px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
        transition: opacity 0.2s ease, background-color 0.2s ease;
        padding: 0;
        flex-shrink: 0;
      }

      .clear-button:hover {
        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
      }
    `,
  ];