import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

import '../../../config/size_config.dart';
import '../../shared/app_texts_widget.dart';
import '../../shared/rounded_container_widget.dart';

class ProfileMedicalInfoWidget extends StatelessWidget {
  const ProfileMedicalInfoWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String url = "assets/images/";
    final double contWidth = SizeConfig.screenWidth * 0.70;
    final double contHeight = SizeConfig.screenHeight * 0.30;

    return RoundedContainer(
      child: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                AppText(
                  'Patient Medical Information ',
                  fontSize: SizeConfig.textMultiplier * 3,
                  fontWeight: FontWeight.w700,
                  color: Hexcolor('#58434F'),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    CircleAvatarWidget(
                      des: 'Vital Sign',
                      url: url + 'heartbeat.png',
                      width: (contWidth) / 3.5,
                      height: (contWidth) / 3.5,
                    ),
                    CircleAvatarWidget(
                      des: 'Lab Result',
                      url: url + 'lab.png',
                      width: (contWidth) / 3.5,
                      height: (contWidth) / 3.5,
                    ),
                    CircleAvatarWidget(
                      des: 'Prescription',
                      url: url + 'note.png',
                      width: (contWidth) / 3.5,
                      height: (contWidth) / 3.5,
                    ),
                    CircleAvatarWidget(
                      des: 'Radiology',
                      url: url + 'radiology-1.png',
                      width: (contWidth) / 3.5,
                      height: (contWidth) / 3.5,
                    ),
                  ],
                )
              ],
            ),
          ),
        ],
      ),
      width: contWidth,
      height: contHeight,
    );
  }
}

class CircleAvatarWidget extends StatelessWidget {
  const CircleAvatarWidget(
      {Key key,
      @required this.url,
      @required this.des,
      this.height,
      this.width})
      : super(key: key);

  final String url;
  final String des;

  final double height;
  final double width;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: height,
          width: width,
          decoration: new BoxDecoration(
              // color: Colors.green, // border color
              shape: BoxShape.circle,
              border: Border.all(color: Hexcolor('#B7831A'),width: 1.5)),
          child: CircleAvatar(
            radius: SizeConfig.imageSizeMultiplier * 12,
            child: Image.asset(url),
            backgroundColor: Colors.transparent,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        AppText(des)
      ],
    );
  }
}