import 'dart:io';
import 'package:wanisdriver/widgets/custom_text.dart';
import 'package:flutter/material.dart';

import '../utils/colors.dart';

class SingleImagePicker extends StatelessWidget {
  final File? image;
  final VoidCallback onImagePick;
  final String title;
  final String? subtitle;
  final bool? required; // Added required attribute

  const SingleImagePicker({
    Key? key,
    required this.image,
    required this.onImagePick,
    required this.title,
    this.subtitle,
    this.required, // Added required parameter
  }) : super(key: key);

  // Helper method to get title with required indicator
  String get _titleWithIndicator {
    if (required == null) {
      return title; // No indicator if not specified
    }
    return required! ? '$title *' : '$title (Optional)';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).brightness == Brightness.dark? AppColors.blackBackgroundColor: AppColors.whiteBackgroundColor,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            spreadRadius: 1,
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                child: Txt(
                  text: _titleWithIndicator, // Using the helper method
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                    //color: Colors.black87,
                  ),
                ),
              ),
              // Optional: Add a visual indicator icon
              if (required == true)
                Container(
                  margin: const EdgeInsets.only(left: 4),
                  child: const Icon(
                    Icons.star,
                    size: 12,
                    color: Colors.red,
                  ),
                ),
            ],
          ),
          if (subtitle != null) ...[
            const SizedBox(height: 4),
            Txt(
              text: subtitle!,
              style: TextStyle(
                fontSize: 12,
                color: Colors.grey.shade600,
              ),
            ),
          ],
          const SizedBox(height: 12),
          GestureDetector(
            onTap: onImagePick,
            child: Container(
              height: 220,
              width: double.infinity,
              decoration: BoxDecoration(
                border: Border.all(
                  color: required == true && image == null
                      ? Colors.red.shade300 // Red border if required and empty
                      : Colors.grey.shade300,
                  style: BorderStyle.solid,
                  width: required == true && image == null ? 2 : 1,
                ),
                borderRadius: BorderRadius.circular(8),
                color: Theme.of(context).brightness == Brightness.dark? AppColors.blackBackgroundColor: AppColors.whiteBackgroundColor,
              ),
              child: image != null
                  ? ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Stack(
                  children: [
                    Image.file(
                      image!,
                      fit: BoxFit.cover,
                      width: double.infinity,
                      height: double.infinity,
                    ),
                    Positioned(
                      top: 8,
                      right: 8,
                      child: Container(
                        padding: const EdgeInsets.all(4),
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.6),
                          shape: BoxShape.circle,
                        ),
                        child: const Icon(
                          Icons.edit,
                          color: Colors.white,
                          size: 16,
                        ),
                      ),
                    ),
                  ],
                ),
              )
                  : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.add_photo_alternate_outlined,
                    size: 32,
                    color: required == true ? Colors.red.shade400 : Colors.grey,
                  ),
                  const SizedBox(height: 8),
                  Txt(
                    text: required == true
                        ? 'Tap to add photo (Required)'
                        : 'Tap to add photo',
                    style: TextStyle(
                      color: required == true ? Colors.red.shade400 : Colors.grey,
                      fontSize: 14,
                      fontWeight: required == true ? FontWeight.w500 : FontWeight.normal,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}