import 'dart:async';
import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:sims_pose_viewer/data/bones.dart';
import 'package:sims_pose_viewer/data/character.dart';
import 'package:sims_pose_viewer/data/pose.dart';
import 'package:sims_pose_viewer/data/sims_skeleton.dart';
import 'package:three_js/three_js.dart' as three;
import 'package:three_js_helpers/three_js_helpers.dart';

class PoseViewer extends StatefulWidget {
  const PoseViewer({super.key});

  @override
  State createState() => PoseViewerState();
}

class PoseViewerState extends State<PoseViewer> {
  final double fov = 60;
  int fps = 0;
  late Timer timer;
  late three.ThreeJS threeJs;
  bool usePerspective = true;

  // Selected character to apply pose
  Character? currentCharacter;
  bool isAnimPlaying = false;

  // List of all skeletons of scene
  List<Character> activeCharacters = [];

  // sidebar
  bool isCharactersCollapsed = true;

  // controls
  late three.OrbitControls controls;

  // Loader for loading mesh
  three.GLTFLoader loader = three.GLTFLoader()..setPath('assets/');
  three.CubeTextureLoader skyboxLoader = three.CubeTextureLoader()..setPath('assets/skybox/');

  @override
  void initState() {
    timer = Timer.periodic(const Duration(seconds: 1), (t) {
      setState(() {
        fps = threeJs.clock.fps;
      });
    });
    threeJs = three.ThreeJS(
      onSetupComplete: () {
        setState(() {});
      },
      windowResizeUpdate: updateCameraFov,
      setup: setup,
      settings: three.Settings(
        useOpenGL: true,
        renderOptions: {
          "minFilter": three.LinearFilter,
          "magFilter": three.LinearFilter,
          "format": three.RGBAFormat,
          "samples": 4,
        },
      ),
    );
    super.initState();
  }

  @override
  void dispose() {
    controls.dispose();
    timer.cancel();
    threeJs.dispose();
    super.dispose();
  }

  void updateCameraFov(Size size) {
    final mqd = MediaQuery.of(context);
    print("Total: ${mqd.size} Texture: $size");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: threeJs.build(),
    );
  }


  void setup() async {
    threeJs.scene = three.Scene();

    final skybox = await skyboxLoader.fromAssetList([
      'right.jpg',
      'left.jpg',
      'top.jpg',
      'bottom.jpg',
      'front.jpg',
      'back.jpg',
    ]);

    threeJs.scene.background = skybox; // three.Color.fromHex32(0x555555);
    threeJs.scene.fog = three.FogExp2(0xcccccc, 0.002);

    threeJs.camera = three.PerspectiveCamera(fov, threeJs.width / threeJs.height, 0.1, 1000);
    threeJs.camera.position.setValues(0, 2, 2);
    threeJs.camera.lookAt(three.Vector3(0, 9, 0));

    controls = three.OrbitControls(threeJs.camera, threeJs.globalKey);

    controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.dampingFactor = 0.05;
    controls.screenSpacePanning = true;
    controls.minDistance = 1;
    controls.maxDistance = 3;
    controls.enableZoom = true;

    controls.maxPolarAngle = math.pi;
    controls.target = three.Vector3(0, 1, 0);

    var grid = GridHelper(10, 10, three.Color(1, 0, 0, 1).hashCode);
    grid.position.setValues(0, 0);
    threeJs.scene.add(grid);

    final ambientLight = three.AmbientLight(0xffffff, 2.0);
    threeJs.scene.add(ambientLight);

    addCharacter();

    threeJs.addAnimationEvent((dt) {
      controls.update();
    });
  }
}