import { reactive } from 'vue';
import { handleInitTick } from './tick';
import { handleInitBeat } from './beat-tick';

export const setting = reactive({
  element: 'jianpu' as 'jianpu' | 'staff', // 元素
  beat: '4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6', // 拍号
  barLine: '1' as '1' | '2' | '4', // 小节数
  tempo: ['1', '2', '3'] as any[], // 节奏形筛选
  scorePart: [] as any, // 生成谱面
  playState: 'pause' as 'pause' | 'play',
  playType: 'tempo' as 'beat' | 'tempo',
  speed: 60 // 默认速度
});

/** 元素 */
export const elementList = {
  jianpu: '简谱',
  staff: '五线谱'
} as any;

/** 拍号 */
export const beatList = {
  '4-2': '2/4',
  '4-3': '3/4',
  '4-4': '4/4',
  '8-3': '3/8',
  '8-6': '6/8'
} as any;

/** 每页小节数量 */
export const barLineList = {
  1: 1,
  2: 2,
  4: 4
} as any;

/** 节奏型筛选 */
// 简谱
const temp: any = {};
for (let i = 1; i <= 14; i++) {
  temp[i] = i + '.png';
}
export const tempo4 = temp;

// 五线谱
const temp2: any = {};
for (let i = 15; i <= 31; i++) {
  temp2[i] = i + '.png';
}
export const tempo8 = temp2;

/** 随机生成元素 */
export const randomScoreElement = (element?: string) => {
  const tempoList = setting.tempo;
  const prefix = setting.element === 'jianpu' ? 'j-' : 'f-';
  if (element) {
    const newArr = tempoList.filter((item: any) => item !== element);
    // 生成一个0到newArr长度之间的随机索引
    const randomIndex = Math.floor(Math.random() * newArr.length);
    return {
      url: prefix + newArr[randomIndex] + '.png',
      index: newArr[randomIndex]
    };
  } else {
    // 如果只有一个就直接返回
    if (tempoList.length === 1) {
      return {
        url: prefix + tempoList[0] + '.png',
        index: tempoList[0]
      };
    } else {
      const randomIndex = Math.floor(Math.random() * tempoList.length);
      const randomItem = tempoList[randomIndex];
      return {
        url: prefix + randomItem + '.png',
        index: randomItem
      };
    }
  }
};

/** 设置元素方向 */
export const elementDirection = (type: string, index: number) => {
  const prefix = setting.element === 'jianpu' ? 'j-' : 'f-';
  let ele = '';
  let i = 0;
  const tempoList = setting.tempo;
  const toIndex = tempoList.findIndex((t: any) => Number(t) === index);
  if (type === 'up') {
    if (toIndex <= 0) {
      ele = tempoList[tempoList.length - 1];
      i = tempoList.length - 1;
    } else {
      ele = tempoList[toIndex - 1];
      i = toIndex - 1;
    }
  } else if (type === 'down') {
    // console.log(tempoList, '121212', index);
    // console.log(toIndex);
    if (toIndex >= tempoList.length - 1) {
      ele = tempoList[0];
      i = 0;
    } else {
      ele = tempoList[toIndex + 1];
      i = toIndex + 1;
    }
  }

  return {
    url: prefix + ele + '.png',
    index: Number(ele)
  };
};

/** 生成谱面 */
export const renderScore = () => {
  const barLine = Number(setting.barLine);
  const beatA = setting.beat.split('-').map(i => Number(i));
  let beat = beatA[1];
  if (beatA[0] === 8) {
    beat = beat / 3;
  }
  console.log(beat, 'beat');
  const tempBeat: any = [];
  for (let i = 0; i < barLine; i++) {
    tempBeat[i] = [];
    for (let j = 0; j < beat; j++) {
      tempBeat[i][j] = {
        ...randomScoreElement()
      };
    }
  }
  setting.scorePart = tempBeat;

  const beatLengthInMilliseconds = (60 / setting.speed) * 1000;
  if (setting.playType === 'beat') {
    handleInitTick(
      beatLengthInMilliseconds,
      Number(beatA[1]) || 4,
      Number(beatA[0])
    );
  } else {
    handleInitBeat(beatLengthInMilliseconds, Number(beatA[1]) || 4);
  }
  initSelectScorePart();
};

/** 初始化选中状态 */
export const initSelectScorePart = (i?: number, j?: number) => {
  setting.scorePart.forEach((part: Array<any>) => {
    part.forEach((item: any) => {
      item.selected = false;
    });
  });

  if (i !== undefined && j !== undefined && setting.scorePart[i][j]) {
    setting.scorePart[i][j].selected = true;
  }
};
