/**
 * Copyright 2019 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { h, Component } from 'preact';
import { ClientVote, palette } from 'shared/state';
import { getHexColor } from 'client/utils';

interface Props {
  vote: ClientVote;
  onVote: (index: number) => void;
}

interface State {
  currentVote: number;
}

export default class VoteButtons extends Component<Props, State> {
  state: State = {
    currentVote: -1,
  };

  private _onButtonClick = (event: Event) => {
    const el = event.currentTarget as HTMLButtonElement;
    const index = Number(el.dataset.i);
    if (index === this.state.currentVote) return;
    this.setState({ currentVote: index });
    this.props.onVote(index);
  };

  render({ vote }: Props, { currentVote }: State) {
    return (
      <div class="vote-buttons">
        {vote.items.map((item, i) => [
          i > 0 ? <div class="vote-or">or</div> : '',
          <button
            class={`unbutton vote-button${
              currentVote === i
                ? ' vote-button-selected'
                : currentVote !== -1
                ? ' vote-button-unselected'
                : ''
            }`}
            style={{
              '--color-from': getHexColor(palette[item.colorId][0]),
              '--color-to': getHexColor(palette[item.colorId][1]),
            }}
            data-i={i}
            onClick={this._onButtonClick}
          >
            {item.label}
          </button>,
        ])}
      </div>
    );
  }
}