import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import ThemeService from 'ember-material-tailwind/services/theme';
import { ClassBuilder, Utils } from 'ember-material-tailwind/utils/class-builder';
import { action } from '@ember/object';
import { createRipple } from 'ember-material-tailwind/utils/ripple';

/**
A Button component

|Property|Type|description|
|---|---|---|
|block|boolean|Adds _w-full_ class to the component to fill all the space of its parent|
|disabled|boolean||
|color|string||
|fab|boolean|indicates that the component is a floating action button|
|flat|boolean|indicates that the component has a flat style|
|icon|string||
|outlined|boolean||

  @class EmtButton
  @public
*/

interface EmtButtonArgs {
  block?: boolean
  color?: string
  dark?: boolean
  disabled?: boolean
  fab?: boolean
  flat?: boolean
  hasIcon?: boolean
  href?: string
  icon?: string
  light?: boolean
  outlined?: boolean
  small?: boolean
  text?: boolean
}

export default class EmtButton extends Component<EmtButtonArgs> {
  @service public theme!: ThemeService;

  private _classesDefault = 'z-10 py-2 px-4 uppercase text-sm font-medium relative overflow-hidden';
  private _basicDefault = 'text-white duration-200 ease-in';
  private _outlinedDefault = 'bg-transparent border border-solid';
  private _textDefault = 'bg-transparent border-none px-4 hover:bg-transparent';
  private _iconDefault = 'p-4 flex items-center select-none';
  private _fabDefault = 'hover:bg-transparent';
  private _smallDefault = 'pt-1 pb-1 pl-2 pr-2 text-xs';
  private _disabledDefault = 'bg-gray-300 text-gray-500 dark:bg-dark-400 elevation-none pointer-events-none hover:bg-gray-300 cursor-default';
  private _elevationDefault = 'hover:elevation-5 elevation-3';

  constructor(owner: unknown, args: EmtButtonArgs) {
    super(owner, args);
  }

  /**
    Provides the tailwind classes depending on the button type

    @field classes
    @type string
  */
  public get classes() : string {
    let shade = 0;

    shade = this.args.light ? 200 : 0;
    shade = this.args.dark ? -400 : shade;

    let normal = 500 - shade;
    let lighter = 400 - shade;

    const basic = !this.args.outlined && !this.args.text && !this.args.fab;
    const elevation = (basic || this.args.hasIcon) && !this.args.disabled && !this.args.flat && !this.args.text;

    const utils = new Utils(this.theme.getColor(this.args.color));
    const builder = new ClassBuilder();

    builder.add(true, this._classesDefault);
    builder.add(basic, this._basicDefault);
    builder.add(basic, `${utils.bg(normal)} hover:${utils.bg(lighter)}`);
    builder.add(elevation, this._elevationDefault);
    builder.add(basic || this.args.outlined || this.args.text, 'rounded');

    builder.add(this.args.outlined, this._outlinedDefault);
    builder.add(this.args.outlined, `${utils.border(lighter)} ${utils.txt(normal)} hover:${utils.bg(normal)} hover:text-white`);
    builder.add(this.args.outlined, 'border-solid');

    builder.add(this.args.text, `${utils.txt(lighter)}`);
    builder.add(this.args.text, this._textDefault);

    builder.add(this.args.hasIcon, this._iconDefault);
    builder.add(this.args.hasIcon, 'rounded-full');
    builder.add(!this.args.hasIcon, 'button');
    builder.remove(this.args.hasIcon, 'py-2');

    builder.add(this.args.disabled, this._disabledDefault);
    builder.remove(this.args.disabled, utils.bg(normal));
    builder.remove(this.args.disabled, utils.bg(lighter));

    builder.add(this.args.small, this._smallDefault);
    builder.add(this.args.small && this.args.hasIcon, 'flex items-center justify-center h-8 w-8');

    builder.add(this.args.block, 'w-full');

    builder.add(this.args.fab, utils.txt(lighter));
    builder.add(this.args.fab, this._fabDefault);
    builder.add(this.args.fab, `hover:${utils.bg(normal)}`);

    return builder.generate();
  }

  @action public onPress(event: MouseEvent|TouchEvent) {
    createRipple(event);
  }
}