import 'package:flutter/cupertino.dart';
import 'package:manager_app/Components/rounded_input_field.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:flutter/material.dart';

class UploadOnlineResourceContainer extends StatefulWidget {
  final ResourceDetailDTO resourceDetailDTO;
  final ValueChanged<ResourceDetailDTO> onChanged;
  const UploadOnlineResourceContainer({
    Key key,
    this.resourceDetailDTO,
    this.onChanged,
  }) : super(key: key);

  @override
  _UploadOnlineResourceContainerState createState() => _UploadOnlineResourceContainerState();
}

class _UploadOnlineResourceContainerState extends State<UploadOnlineResourceContainer> with SingleTickerProviderStateMixin {
  String urlResourceToShow;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
     print(size.width);
    return displayElement(size);
  }

  showFile() {
    if (widget.resourceDetailDTO.type == ResourceType.videoUrl || widget.resourceDetailDTO.type == ResourceType.video) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("La prévisualisation de la vidéo n'est pas disponible"),
          ),
          Icon(
            Icons.ondemand_video_sharp,
            size: 35,
          ),
        ],
      );
      /*return FutureBuilder(
          future: loadFile(urlResourceToShow),
          builder: (context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return Container(
                  height: 300,
                  child: DartVLC(file: snapshot.data)
              );
            } else if (snapshot.connectionState == ConnectionState.none) {
              return Text("No data");
            } else {
              return Center(child: Container(height: 200, child: Text('LOADING TODO FRAISE')));
            }
          }
      );*/
      /*await Media.file(widget.file)*/
    } else {
      return Image.network(
          urlResourceToShow,
          height: 200,
          fit:BoxFit.scaleDown
      );
    }
  }

  /*loadFile(String urlResourceToShow) async {
    return await Media.network(urlResourceToShow);
  }*/

  displayElement(Size size) {
    return Column(
      children: [
        Center(
          child: Row(
            children: [
              Align(
                  alignment: AlignmentDirectional.center,
                  child: Text("URL:", style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: size.width *0.35, // TODO GET SIZE
                  child: RoundedInputField(
                    hintText: widget.resourceDetailDTO.type == ResourceType.imageUrl ? "Url de l'image" : "Url de la vidéo",
                    icon: widget.resourceDetailDTO.type == ResourceType.imageUrl ? Icons.image : Icons.ondemand_video, // TODO: TBD
                    onChanged: (String text) {
                      print("onchanged url");
                      widget.resourceDetailDTO.data = text;
                    },
                    initialValue: ""
                  ),
                ),
              ),
              InkWell(
                onTap: () {
                  print("refresh preview");
                  setState(() {
                    urlResourceToShow = widget.resourceDetailDTO.data;
                  });
                },
                child: Center(
                  child: Icon(
                    Icons.cloud_download_outlined,
                    color: kPrimaryColor,
                    size: 35,
                  ),
                ),
              )
            ],
          ),
        ),
        if(widget.resourceDetailDTO.data != null) showFile()
      ],
    );
  }
}