import 'package:flutter/material.dart';

class CurrencyDropdownField extends StatelessWidget {
  final String currency;
  final ValueChanged<String> onChanged;

  const CurrencyDropdownField({
    super.key,
    required this.currency,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return DropdownButtonFormField<String>(
      initialValue: currency,
      isExpanded: true,
      icon: const Icon(Icons.keyboard_arrow_down_rounded),
      // 선택된 아이템은 코드만 간결하게 표시하여 오버플로우 방지
      selectedItemBuilder: (context) {
        final color = theme.colorScheme.onSurface;
        return const [
          'KRW',
          'USD',
          'JPY',
          'CNY',
        ].map((code) {
          return Align(
            alignment: Alignment.centerLeft,
            child: Text(
              code,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 14, color: color),
            ),
          );
        }).toList();
      },
      decoration: InputDecoration(
        filled: true,
        fillColor: theme.colorScheme.surface,
        contentPadding:
            const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: BorderSide.none,
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: BorderSide(
            color: theme.colorScheme.outline.withValues(alpha: 0.6),
            width: 1,
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: BorderSide(
            color: theme.colorScheme.primary,
            width: 2,
          ),
        ),
      ),
      items: const [
        DropdownMenuItem(
            value: 'KRW', child: _CurrencyItem(symbol: '₩', code: 'KRW')),
        DropdownMenuItem(
            value: 'USD', child: _CurrencyItem(symbol: '\$', code: 'USD')),
        DropdownMenuItem(
            value: 'JPY', child: _CurrencyItem(symbol: '¥', code: 'JPY')),
        DropdownMenuItem(
            value: 'CNY', child: _CurrencyItem(symbol: '¥', code: 'CNY')),
      ],
      onChanged: (val) {
        if (val != null) onChanged(val);
      },
    );
  }
}

class _CurrencyItem extends StatelessWidget {
  final String symbol;
  final String code;

  const _CurrencyItem({required this.symbol, required this.code});

  @override
  Widget build(BuildContext context) {
    final color = Theme.of(context).colorScheme.onSurface;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          symbol,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w700,
            color: color,
          ),
        ),
        const SizedBox(width: 8),
        Text(
          code,
          style: TextStyle(
            fontSize: 14,
            color: color,
          ),
        ),
      ],
    );
  }
}