import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: EditTranslationScreen(),
    );
  }
}

class NewTranslationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        toolbarHeight: 80,
        title: const Text('Новый перевод'),
        titleTextStyle: TextStyle(fontSize: 28),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // Действие при нажатии на кнопку назад
          },
        ),
        elevation: 5.0,
        shadowColor: Colors.black,
        surfaceTintColor: Colors.transparent,
          backgroundColor: Color.fromRGBO(254, 247, 255, 1),
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(18, 18, 18, 36),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height:24),
            Text(
              'Название',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 0.5),
            ),
            SizedBox(height: 10),
            TextField(
              decoration: InputDecoration(
                hintText: 'Впиши сюда название',
                border: OutlineInputBorder(borderSide: BorderSide(color: Colors.black, width: 1.14), borderRadius: BorderRadius.circular(10)),
                enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black, width: 1.14), borderRadius: BorderRadius.circular(10)),
                focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.purpleAccent, width: 1.14), borderRadius: BorderRadius.circular(10)),
              ),
            ),
            SizedBox(height: 58),
            Text(
              'Ресурсы',
              style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 0.5),
            ),
            SizedBox(height: 16),
            ResourceItem(
              icon: Icons.music_note_outlined,
              text: 'Аудиодорожка',
              actionText: 'Загрузить',
              onActionPressed: () {
                // Действие при нажатии на кнопку Загрузить
              },
            ),
            ResourceItem(
              icon: Icons.looks_one_outlined,
              text: 'дорожка субтитров',
              actionText: 'Удалить',
              onActionPressed: () {
                // Действие при нажатии на кнопку Удалить
              },
            ),
            ResourceItem(
              icon: Icons.looks_two_outlined,
              text: 'дорожка субтитров',
              actionText: 'Удалить',
              onActionPressed: () {
                // Действие при нажатии на кнопку Удалить
              },
            ),
            Spacer(),
            Row(mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(width: 164, height: 52,
                  child: OutlinedButton.icon(
                    onPressed: () {
                      // Действие при нажатии на кнопку Отменить
                    },
                    style: OutlinedButton.styleFrom(
                      foregroundColor: Color.fromRGBO(103, 80, 164, 1),
                      backgroundColor: Colors.white,
                        surfaceTintColor: Colors.transparent
                    ),
                    label: Text('Отменить',
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: 0.5),
                    ),
                    icon: Icon(Icons.close),
                  ),
                ),
                SizedBox(width: 16),
                Container(width: 164, height: 52,
                  child: ElevatedButton.icon(
                    onPressed: () {
                      // Действие при нажатии на кнопку Создать
                    },
                    icon: Icon(Icons.check),
                    label: Text('Создать',
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: 0.5),
                    ),
                    style: OutlinedButton.styleFrom(
                        backgroundColor: Color.fromRGBO(103, 80, 164, 1),
                      foregroundColor: Colors.white,
                        surfaceTintColor: Colors.transparent
                    ),


                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class ResourceItem extends StatelessWidget {
  final IconData icon;
  final String text;
  final String actionText;
  final VoidCallback onActionPressed;

  ResourceItem({
    required this.icon,
    required this.text,
    required this.actionText,
    required this.onActionPressed,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        children: [
          Icon(icon, size: 44),
          SizedBox(width: 10),
          Expanded(
              child: Text(text,
              style: TextStyle(fontWeight: FontWeight.normal, fontSize: 20))
          ),
          ElevatedButton(
            onPressed: onActionPressed,
            child: Text(actionText),
            style: ElevatedButton.styleFrom(
              fixedSize: Size(140, 48),
              alignment: Alignment.center,
              backgroundColor: actionText == 'Загрузить' ? Color.fromRGBO(232, 222, 248, 1) : Color.fromRGBO(199, 199, 199, 1),
              foregroundColor: Color.fromRGBO(29,25,43,1),
              textStyle: TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
                surfaceTintColor: Colors.transparent
            ),
          ),
        ],
      ),
    );
  }
}

class EditTranslationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        toolbarHeight: 80,
        title: const Text('Название перевода'),
        titleTextStyle: TextStyle(fontSize: 28),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // Действие при нажатии на кнопку назад
          },
        ),
        elevation: 5.0,
        shadowColor: Colors.black,
        surfaceTintColor: Colors.transparent,
        backgroundColor: Color.fromRGBO(254, 247, 255, 1),
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(4, 8, 4, 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height:24),
            SubtitleCard(
                index: 1,
                isChecked: true,
                originalText: 'Hyakumannin no tame ni utawareta rabusongu nanka ni',
                secondaryText: 'My feelings dont fit so easily with',
                translatedText: 'Слышу песню о любви, она не трогает, скуку наводит лишь.',
                originalSyllables: 19,
                translatedSyllables: 10
            ),
            SubtitleCard(
                index: 2,
                isChecked: true,
                originalText: 'Boku wa kantan ni omoi wo kasanetari wa shinai',
                secondaryText: 'Some love song sung for a million people',
                translatedText: 'Спросишь, почему же так: её текст писали не одной, а тысячам баб.',
                originalSyllables: 21,
                translatedSyllables: 21
            ),
            SubtitleCard(
              index: 3,
              isChecked: false,
              originalText: '"Koiseiyo" to semeru kono machi no kihon kouzou wa',
              secondaryText: 'This town telling me I should love someone, anyone',
              translatedText: 'Все говорят мне, что пора присмотреть хоть кого-нибудь',
              originalSyllables: 20,
              translatedSyllables: 16
            ),
            SubtitleCard(
                index: 4,
                isChecked: false,
                originalText: 'Easy love! Easy come! Easy go!',
                translatedText: '',
                originalSyllables: 9,
                translatedSyllables: 0
            ),
            Spacer(),
            Divider(color: Color.fromRGBO(121,116, 126, 1), thickness: 1),
            Container(
              width: double.infinity, // Линия во всю ширину экрана
              height: 36,
              alignment: Alignment.center,
              child:
                Text('Конец', style: TextStyle(fontWeight: FontWeight.normal, fontSize: 24, color: Color.fromRGBO(121,116, 126, 1))),
            ),
            ],
            ),
        ),
      );
  }
}

class SubtitleCard extends StatelessWidget {
  final int index;
  bool isChecked;
  final String originalText;
  final String? secondaryText;
  final String translatedText;
  final int originalSyllables;
  final int translatedSyllables;

  SubtitleCard({
    required this.index,
    required this.isChecked,
    required this.originalText,
    this.secondaryText,
    required this.translatedText,
    required this.originalSyllables,
    required this.translatedSyllables,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 4.0),
        child: Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), side: BorderSide(color: Color.fromRGBO(0, 0, 0, 0.5), width: 1)),
        elevation: 0,
        color: isChecked ? Color.fromRGBO(183, 255, 181, 1) : Colors.white,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Checkbox(
                    value: isChecked,
                    onChanged: (bool? value) {},
                    shape: CircleBorder(),
                    activeColor: Color.fromRGBO(50, 160, 50, 1),
                    checkColor: Colors.white, // Цвет галочки
                  ),
                  Text('Строка $index', style: TextStyle(fontSize: 16)),
                  Spacer(),
                ],
              ),
              _buildSubtitleRow(originalText, originalSyllables, true),
              SizedBox(height: 8),
              if (secondaryText != null) _buildSubtitleRow(secondaryText!, null, true),
              SizedBox(height: 8),
              _buildTranslationRow(translatedText, translatedSyllables, false),

            ],
        ),
      ),
    ),
    );
  }

  Widget _buildSubtitleRow(String text, int? syllables, bool readonly) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
              decoration: BoxDecoration(
                color: readonly ? Color.fromRGBO(210, 210, 210, 1) : Colors.white,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Color.fromRGBO(0, 0, 0, 0.5)),
              ),
              child: Text(text, style: (TextStyle(fontSize: 18))),
            ),
          ),
          Container(
              width: 44,
              margin: EdgeInsets.only(left: 8),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: (syllables==null) ? Color.fromRGBO(210, 210, 210, 0) : Colors.white,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: (syllables == null)?Color.fromRGBO(0, 0, 0, 0) : Color.fromRGBO(0, 0, 0, 0.5)),
              ),
            child: (syllables!=null) ? Center(child: Text('$syllables', style: (TextStyle(fontSize: 18)))) : Center(child: Text('', style: (TextStyle(fontSize: 18, color: Color.fromRGBO(0, 0, 0, 0))))),
            ),
        ],
      ),
    );
  }

  Widget _buildTranslationRow(String text, int? syllables, bool readonly) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,

        children: [
          Expanded(
              child: TextField(

                maxLines: null,
              decoration: InputDecoration(
                hintText: text,//тут я не понял как вставить оригинальный текст как значение. сейчас это тупо подсказка
                hintMaxLines: null,
                filled: true,
                  fillColor: Colors.white,
                  border: OutlineInputBorder(borderSide: BorderSide(color: Color.fromRGBO(0, 0, 0, 0.75), width: 1.14), borderRadius: BorderRadius.circular(10)),
                  enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Color.fromRGBO(0, 0, 0, 0.75), width: 1.14), borderRadius: BorderRadius.circular(10)),
                  focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color.fromRGBO(0, 0, 0, 0.75), width: 1.14), borderRadius: BorderRadius.circular(10)),
                contentPadding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 12.0),

              ),
                style: (TextStyle(fontSize: 18)),
              ),
            ),
          Container(
            width: 44,
            margin: EdgeInsets.only(left: 8),
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Color.fromRGBO(0, 0, 0, 0.5)),
            ),
            child: (syllables!=null) ? Center(child: Text('$syllables', style: (TextStyle(fontSize: 18)))) : Center(child: Text('--', style: (TextStyle(fontSize: 18)))),
          ),
        ],
      ),
    );
  }
}