import {Component, h, Prop} from '@stencil/core';
import {PaginationItemVariants} from '../../../utils/utils';

@Component({
  tag: 'hy-pager-item',
  styleUrl: 'hy-pager-item.scss',
  shadow: true,
})
export class HyPagerItem {
  @Prop() variant: PaginationItemVariants = PaginationItemVariants.default;
  @Prop() itemLabel?: string;
  @Prop() itemUrl?: string;
  @Prop() scAriaLabel?: string;

  render() {
    let classAttributes = ['hy-pager__item'].join(' ');
    switch (this.variant) {
      case PaginationItemVariants.current: {
        classAttributes = ['hy-pager__item', 'hy-pager__item__current'].join(' ');
        return (
          <li class={classAttributes}>
            <a href={this.itemUrl} aria-current="true">
              {this.itemLabel}
            </a>
          </li>
        );
      }
      case PaginationItemVariants.next: {
        classAttributes = ['hy-pager__item', 'hy-pager__item__next'].join(' ');
        const iconClassAttributes = ['link-icon'].join(' ');
        return (
          <li class={classAttributes}>
            <a href={this.itemUrl} aria-label={this.scAriaLabel}>
              {this.itemLabel}
              <span class={'hy-icon-wrapper'}>
                <div class={iconClassAttributes}>
                  <hy-icon icon={'hy-icon-arrow-to-right'} size={12} />
                </div>
              </span>
            </a>
          </li>
        );
      }
      case PaginationItemVariants.previous: {
        classAttributes = ['hy-pager__item', 'hy-pager__item__previous'].join(' ');
        const iconClassAttributes = ['link-icon'].join(' ');
        return (
          <li class={classAttributes}>
            <a href={this.itemUrl} aria-label={this.scAriaLabel}>
              <span class={'hy-icon-wrapper'}>
                <div class={iconClassAttributes}>
                  <hy-icon icon={'hy-icon-arrow-left'} size={12} />
                </div>
              </span>
              {this.itemLabel}
            </a>
          </li>
        );
      }
      case PaginationItemVariants.ellipsis: {
        classAttributes = ['hy-pager__item', 'hy-pager__item__ellipsis'].join(' ');
        return <li class={classAttributes}>...</li>;
      }
      default: {
        classAttributes = ['hy-pager__item'].join(' ');
        return (
          <li class={classAttributes}>
            <a href={this.itemUrl} aria-label={this.scAriaLabel}>
              {this.itemLabel}
            </a>
          </li>
        );
      }
    }
  }
}