import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:satu/shared/app_colors.dart';

class BottomBar extends StatelessWidget {
  const BottomBar({required this.selectedIndex, required this.onTap, Key? key})
      : super(key: key);

  final int selectedIndex;
  final void Function(int index) onTap;

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 8.0,
      child: SafeArea(
        child: SizedBox(
          height: 60.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              BottomButton(
                active: selectedIndex == 0,
                onTap: () => onTap(0),
                svgFile: 'sell',
              ),
              BottomButton(
                active: selectedIndex == 1,
                onTap: () => onTap(1),
                svgFile: 'buy',
                disable: true,
              ),
              BottomButton(
                active: selectedIndex == 2,
                onTap: () => onTap(2),
                svgFile: 'journal',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class BottomButton extends StatelessWidget {
  const BottomButton(
      {required this.svgFile,
      required this.onTap,
      required this.active,
      Key? key,
      this.disable = false})
      : super(key: key);

  final String svgFile;
  final void Function() onTap;
  final bool active;
  final bool disable;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: Container(
            decoration: BoxDecoration(
                border: Border(
              top: BorderSide(
                  width: 3.0,
                  color: active ? primaryColor : Colors.transparent),
            )),
          ),
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(50),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: disable == true ? (){} : onTap,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: SvgPicture.asset(
                  'assets/images/svg/$svgFile.svg',
                  height: 30,
                  width: 30,
                  color: disable
                      ? disableColor
                      : active
                          ? primaryColor
                          : placeholderColor,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}