import React, { Dispatch, SetStateAction } from 'react';
import Modal from 'react-native-modal';
import {
  Text,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
  ScrollView,
  Platform
} from 'react-native';
import { Formik } from 'formik';
import * as yup from 'yup';

import { ModalStyles } from './styles';
import { Colors } from 'src/theme';
import { Button, Input } from 'src/components';
import { ButtonVariants } from 'src/types/components';
import StarRating from '../StarRating';
import { FixersData } from '../../utils/types';

import CloseIcon from 'assets/icons/close.svg';

const validationSchema = yup.object().shape({
  rating1: yup.number().required('required').min(1, 'field is required'),
  rating2: yup.number().required('required').min(1, 'field is required'),
  rating3: yup.number().required('required').min(1, 'field is required'),
  comment: yup
    .string()
    .required('comment is required')
    .min(5, 'comment should be at least 5 characters')
    .max(8000, 'comment should not exceed 8000 characters')
});

interface RateModalProps {
  selectedFixer: FixersData;
  setSelectedFixer: Dispatch<SetStateAction<FixersData | null>>;
  saveRating: (values: {
    rating1: number;
    rating2: number;
    rating3: number;
    comment: string;
  }) => void;
}

export const RateModal = ({ selectedFixer, setSelectedFixer, saveRating }: RateModalProps) => {
  return (
    <Modal isVisible={selectedFixer ? true : false}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ flex: 1, justifyContent: 'center' }}
      >
        <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
          <View style={ModalStyles.modal}>
            <View style={ModalStyles.modalContent}>
              <View style={{ alignSelf: 'flex-end' }}>
                <TouchableOpacity onPress={() => setSelectedFixer(null)}>
                  <CloseIcon />
                </TouchableOpacity>
              </View>
              <Formik
                initialValues={{
                  rating1: 0,
                  rating2: 0,
                  rating3: 0,
                  comment: ''
                }}
                validationSchema={validationSchema}
                onSubmit={(values) => {
                  saveRating(values);
                }}
              >
                {({ handleChange, handleSubmit, setFieldValue, values, errors, touched }) => (
                  <View style={{ display: 'flex', gap: 16 }}>
                    <Text style={ModalStyles.title}>Rate fixer {selectedFixer?.name}</Text>

                    <View style={ModalStyles.rateItem}>
                      <Text style={ModalStyles.header}>Responsiveness (digital communication)</Text>
                      <StarRating
                        rating={values.rating1}
                        onRatingChange={(rating: number) => setFieldValue('rating1', rating)}
                      />
                      {errors.rating1 && touched.rating1 && (
                        <Text style={ModalStyles.textError}>{errors.rating1}</Text>
                      )}
                    </View>

                    <View style={ModalStyles.rateItem}>
                      <Text style={ModalStyles.header}>Communication (language skills)</Text>
                      <StarRating
                        rating={values.rating2}
                        onRatingChange={(rating: number) => setFieldValue('rating2', rating)}
                      />
                      {errors.rating2 && touched.rating2 && (
                        <Text style={ModalStyles.textError}>{errors.rating2}</Text>
                      )}
                    </View>

                    <View style={ModalStyles.rateItem}>
                      <Text style={ModalStyles.header}>On site support</Text>
                      <StarRating
                        rating={values.rating3}
                        onRatingChange={(rating: number) => setFieldValue('rating3', rating)}
                      />
                      {errors.rating3 && touched.rating3 && (
                        <Text style={ModalStyles.textError}>{errors.rating3}</Text>
                      )}
                    </View>

                    <View style={ModalStyles.rateItem}>
                      <Text style={ModalStyles.header}>Comment</Text>
                      <Input
                        onChange={handleChange('comment')}
                        value={values.comment}
                        placeholder={'Your comment...'}
                        multiline
                        inputMode={'text'}
                        height={64}
                        formikError={errors.comment && touched.comment ? errors.comment : ''}
                      />
                    </View>

                    <View style={ModalStyles.buttonsWrapper}>
                      <Button
                        variant={ButtonVariants.OPACITY}
                        containerStyles={ModalStyles.buttonClose}
                        textStyles={{
                          color: Colors.DARK_BLUE
                        }}
                        onPress={() => setSelectedFixer(null)}
                        children={'Close'}
                      />
                      <Button
                        variant={ButtonVariants.FILL}
                        containerStyles={ModalStyles.buttonSave}
                        textStyles={{
                          color: Colors.WHITE
                        }}
                        onPress={handleSubmit}
                        children={'Save'}
                      />
                    </View>
                  </View>
                )}
              </Formik>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </Modal>
  );
};
