import js.Browser.*;
import js.html.Element;
import js.html.SelectElement;
import js.html.OptionElement;
import js.html.InputElement;

using Std;
using StringTools;
using Lambda;

class Main {
    static inline var html: String = '
    <style>
    body {
      color: #333;
    }
    .field {
      display: block;
      margin: 0 0 10px;
    }
    .error {
      color: #e25858;
    }
    .desc {
      font-size: .7em;
      border: 1px solid #ccc;
      padding: 5px;
      margin: 5px;
    }
    </style>

    <form id="form">
      <div class="field">
        残ポイント:<span id="point">0</span>
      </div>

      <div class="field">
        <label fo="cost">コスト</label>
        <select id="cost">
          <option value="120">7</option>
          <option value="165">8</option>
          <option value="195">9</option>
          <option value="225">10</option>
          <option value="240">11</option>
        </select>
      </div>

      <div class="field">
        <label for="skill">スキル</label>
        <select id="skill">
          <option
            value="25"
            data-desc="
              【パッシブ】【合成習得不可】
              通常攻撃が二回攻撃になる。
              さらに常に機動力を増加させる。
              (この効果は支援攻撃には付与されず、この効果の攻撃により発生する味方の支援攻撃は1回のみとなる)
              《スキルタイプ:通常攻撃変化》
              「通常攻撃変化」のスキルタイプを持つスキルは、機体1体につき1つまでしか習得できない。
            "
          >二回攻撃付与【自身】Ⅰ</option>
          <option
            value="20"
            data-desc="
              【パッシブ】【合成習得不可】
              通常攻撃が後衛優先攻撃になる。
              さらに常に攻撃力を増加させる。
              《スキルタイプ:通常攻撃変化》
              「通常攻撃変化」のスキルタイプを持つスキルは、機体1体につき1つまでしか習得できない。
            "
          >後衛優先攻撃付与【自身】Ⅰ(New)</option>
          <option
            value="15"
            data-desc="
              【スタートアップ】【合成習得不可】
              戦闘開始時、自身のパッシブスキル以外のパラメーター減少効果を解除する。
              さらに攻撃力増加効果と機動力増加効果を付与する。
              効果は3ターン持続する。
            "
          >攻撃機動強化【奮起自身】Ⅰ</option>
          <option
            value="20"
            data-desc="
              【スタートアップ】【合成習得不可】
              戦闘開始時、自身に装甲増加効果と演算力増加効果を付与する。
              さらに、自身に優先的に敵のスキルや通常攻撃のターゲットとなる効果を付与する。
              効果は3ターン持続する。 
            "
          >装甲演算強化【挑発】Ⅰ</option>
          <option
            value="10"
            data-desc="
              【スタートアップ】【合成習得不可】
              戦闘開始時、味方全員に演算力増加効果と機動力増加効果を確率で付与する。
              判定は1体毎に行う。
              効果は1ターン持続する。
            "
          >演算機動強化【刹那全体】Ⅰ</option>
          <option
            value="10"
            data-desc="
              【スタートアップ】【合成習得不可】
              戦闘開始時、自身に攻撃力増加効果と機動力増加効果を付与する。
              さらに、自身に先制攻撃効果を付与する。
              パラメーター増加効果は3ターン持続する。
            "
          >攻撃機動強化【速攻自身】Ⅰ</option>
          <option
            value="10"
            data-desc="
              【スタートアップ】【合成習得不可】
              戦闘開始時、敵全員に攻撃力減少効果と演算力減少効果を確率で付与する。
              判定は1体毎に行う。
              効果は3ターン持続する。
            "
          >攻撃演算弱体【全体】Ⅰ</option>
          <option
            value="15"
            data-desc="
              【スタートアップ】【合成習得不可】
              戦闘開始時、自身に機動力増加効果と演算力増加効果を付与する。
              さらに装甲の高い敵を狙い装甲増加効果を抑制する。
              効果は1ターン持続する。
            "
          >機動演算強化【装甲抑制】Ⅰ(New)</option>
          <option
            value="15"
            data-desc="
              【アクティブ】【合成習得不可】
              自身のパッシブスキル以外のパラメーター減少効果を解除する。
              さらに、敵全員に攻撃を行う。
            "
          >全方位攻撃【奮起】Ⅰ</option>
          <option
            value="20"
            data-desc="
              【アクティブ】【合成習得不可】
              命中率を増加させて3回攻撃する。
              命中率増加量は装甲に依存し、発動率は演算力に依存する。
            "
          >誘導三回攻撃【装甲】Ⅰ</option>
          <option
            value="10"
            data-desc="
              【アクティブ】【合成習得不可】
              攻撃力を大きく増加させて攻撃を行い、HP減少効果を付与する。
              さらにその前後左右の敵にHP減少効果を付与する。
              (HP減少効果によるダメージ量は、効果付与時の自身のHPと対象のHPに大きく依存する)
              効果は4ターン持続する。
            "
          >強化攻撃【熔融】Ⅰ</option>
          <option
            value="20"
            data-desc="
              【アクティブ】【合成習得不可】
              攻撃力の高い敵を狙う。
              攻撃力を大きく増加させて、バリア効果とガード効果を無視して攻撃を行う。
            "
          >突貫攻撃【強敵狙撃】Ⅰ</option>
          <option
            value="10"
            data-desc="
              【アクティブ】【合成習得不可】
              敵機体に2~4回の攻撃を行う。
              それぞれの攻撃終了後、対象の装甲を減少させる。
              効果は2ターン持続する。
              その後1ターンの間行動不能になる。
            "
          >乱射攻撃【重撃】Ⅰ</option>
          <option
            value="20"
            data-desc="
              【アクティブ】【合成習得不可】
              1ターンの間、前列に配置された自分以外の味方全員の装甲と演算力を増加させる。
              さらに、次のターンの自身の行動まで、前列に配置された味方機体が通常攻撃を行うと、自身も攻撃を行うようになる。
            "
          >支援攻撃Ⅳ(New)</option>
          <option
            value="5"
            data-desc="
              【アクティブ】【合成習得不可】
              1,2ターン目に発動し、敵味方全員に攻撃力増加効果と装甲弱体効果を確率で付与する。
              判定は1体毎に行う。
              効果は3ターン持続する。
            "
          >オーバーパワー【全域】Ⅰ(New)</option>
        </select>
      </div>

      <div id="desc" class="desc"></div>

      <div class="field">
        <label for="close_range_atack_point">近接</label>
        <input id="close_range_atack_point" data-target="close_range_atack" data-rate="40"  data-base="1600"type="number" min="0" value="0">
        <span class="status" id="close_range_atack">1600</span>
      </div>

      <div class="field">
        <label for="long_range_atack_point">遠隔</label>
        <input id="long_range_atack_point" data-target="long_range_atack" data-rate="40"  data-base="1600"type="number" min="0" value="0">
        <span class="status" id="long_range_atack">1600</span>
      </div>

      <div class="field">
        <label for="armor_point">装甲</label>
        <input id="armor_point" data-target="armor" data-rate="37" data-base="1600" type="number" min="0" value="0">
        <span class="status" id="armor">1600</span>
      </div>

      <div class="field">
        <label for="movement_point">機動</label>
        <input id="movement_point" data-target="movement" data-rate="1"  data-base="150"type="number" min="0" value="0">
        <span class="status" id="movement">150</span>
      </div>

      <div class="field">
        <label for="occupation_point">占拠</label>
        <input id="occupation_point" data-target="occupation" data-rate="1"  data-base="30"type="number" min="0" value="0">
        <span class="status" id="occupation">30</span>
      </div>

      <div class="field">
        <label for="operation_point">演算</label>
        <input id="operation_point" data-target="operation" data-rate="1"  data-base="100" type="number" min="0" value="0">
        <span class="status" id="operation">100</span>
      </div>
    </form>
    ';

    static var point: Element;

    static var cost: SelectElement;

    static var skill: SelectElement;

    static var desc: Element;

    static var close_range_atack_point: InputElement;

    static var long_range_atack_point: InputElement;

    static var armor_point: InputElement;

    static var movement_point: InputElement;

    static var occupation_point: InputElement;

    static var operation_point: InputElement;

    static var status_point_fields: Array<InputElement>;

    static function main() {
        document.body.innerHTML = html.trim();

        point = document.getElementById('point');
        cost = cast(document.getElementById('cost'), SelectElement);
        skill = cast(document.getElementById('skill'), SelectElement);
        desc = document.getElementById('desc');
        close_range_atack_point = cast(document.getElementById('close_range_atack_point'), InputElement);
        long_range_atack_point = cast(document.getElementById('long_range_atack_point'), InputElement);
        armor_point = cast(document.getElementById('armor_point'), InputElement);
        movement_point = cast(document.getElementById('movement_point'), InputElement);
        occupation_point = cast(document.getElementById('occupation_point'), InputElement);
        operation_point = cast(document.getElementById('operation_point'), InputElement);

        status_point_fields = [];
        status_point_fields.push(close_range_atack_point);
        status_point_fields.push(long_range_atack_point);
        status_point_fields.push(armor_point);
        status_point_fields.push(movement_point);
        status_point_fields.push(occupation_point);
        status_point_fields.push(operation_point);

        var update_all = function(event) {
            for (field in status_point_fields) {
                var point = field.value.parseInt();
                var output_element = document.getElementById(field.dataset.target);
                var rate = field.dataset.rate.parseInt();
                var base = field.dataset.base.parseInt();

                if (
                    (cost.value == '120' && point > 40) ||
                    (cost.value == '165' && point > 55) ||
                    (cost.value == '195' && point > 65) ||
                    (cost.value == '225' && point > 75) ||
                    (cost.value == '240' && point > 80)
                ) {
                    output_element.innerHTML = ((point * rate) + base).string() + '<span class="error"> 振り分けポイントオーバー</span>';
                } else {
                    output_element.innerText = ((point * rate) + base).string();
                }
            }

            update_skill_desc();
            update_rest_point();
        }

        skill.addEventListener('change', update_all);
        cost.addEventListener('change', update_all);
        close_range_atack_point.addEventListener('change', update_all);
        long_range_atack_point.addEventListener('change', update_all);
        armor_point.addEventListener('change', update_all);
        movement_point.addEventListener('change', update_all);
        occupation_point.addEventListener('change', update_all);
        operation_point.addEventListener('change', update_all);

        update_skill_desc();
        update_rest_point();
    }

    static function update_skill_desc(): Void {
        var i = 0;
        while (i < skill.options.length) {
            var option = cast(skill.options[i], OptionElement);
            if (option.selected) {
                desc.innerText = option.dataset.desc.trim().replace(' ', '');
            }
            i++;
        }
    }

    static function update_rest_point(): Void {
        var new_point = cost.value.parseInt() - dividedPoint();
        point.innerText = new_point.string();
    }

    static function dividedPoint(): Int {
        return skill.value.parseInt()
               + close_range_atack_point.value.parseInt()
               + long_range_atack_point.value.parseInt()
               + armor_point.value.parseInt()
               + movement_point.value.parseInt()
               + occupation_point.value.parseInt()
               + operation_point.value.parseInt();
    }
}