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: 75.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              BottomButton(
                active: selectedIndex == 0,
                onTap: () => onTap(0),
                svgFile: 'sell',
                name: 'Продажа',
              ),
              BottomButton(
                active: selectedIndex == 1,
                onTap: () => onTap(1),
                svgFile: 'buy',
                disable: true,
                name: 'Покупка',
              ),
              BottomButton(
                active: selectedIndex == 2,
                onTap: () => onTap(2),
                svgFile: 'journal',
                name: 'Журнал',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

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

  @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: Column(
                  children: [
                    SvgPicture.asset(
                      'assets/images/svg/$svgFile.svg',
                      height: 25,
                      width: 25,
                      color: disable
                          ? disableColor
                          : active
                              ? primaryColor
                              : placeholderColor,
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text(
                      name,
                      style: TextStyle(fontSize: 10, color: disable
                          ? disableColor
                          : active
                          ? primaryColor
                          : placeholderColor),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}