import React, { useState } from 'react'
import { ScrollView, View, Text, StyleSheet, Dimensions } from 'react-native'
import { Button } from './Button'
import { Rating } from './Rating'
import { Input } from './Input'
import { ContactPermissionCheckbox } from './ContactPermissionCheckbox'
import type { IconItem } from './constants'

const { width } = Dimensions.get('window')
const defaultStyle: Style = {
  backgroundColor: '#212431',
  textColor: '#ffffff',
  primaryFont: 'Arial',
  secondaryFont: 'Arial',
  buttonsStyle: {
    primaryButtonBackgroundColor: '#FDA783',
    primaryButtonTextColor: '#2D3142',
    secondaryButtonBackgroundColor: '#212431',
    secondaryButtonTextColor: '#ffffff',
  },
  inputStyle: {
    backgroundColor: '#2D3142',
    textColor: '#ffffff',
    borderColor: '#414762',
  },
  checkboxStyle: {
    checkedBorderColor: '#FDA783',
    uncheckedBorderColor: '#414762',
    checkedBackgroundColor: '#FDA783',
    uncheckedBackgroundColor: '#2D3142',
    checkmarkColor: '#2D3142',
    textColor: '#ffffff',
  },
  ratingBoxStyle: {
    backgroundColor: '#CDD0DC',
    textColor: '#000000',
    iconTextColor: '#2D3142',
    fontFamily: 'Arial',
  },
}

interface CheckboxStyle {
  checkedBorderColor: string;
  uncheckedBorderColor: string;
  checkedBackgroundColor: string;
  uncheckedBackgroundColor: string;
  checkmarkColor: string;
  textColor: string;
}

interface ButtonsStyle {
  primaryButtonBackgroundColor?: string;
  primaryButtonTextColor?: string;
  secondaryButtonBackgroundColor?: string;
  secondaryButtonTextColor?: string;
}

interface InputStyle {
  backgroundColor?: string;
  textColor?: string;
  borderColor?: string;
}

interface RatingBoxStyle {
  backgroundColor: string;
  textColor: string;
  iconTextColor: string;
  fontFamily: string;
}

export interface Style {
  backgroundColor: string;
  textColor: string;
  primaryFont: string;
  secondaryFont: string;
  buttonsStyle: ButtonsStyle;
  inputStyle: InputStyle;
  checkboxStyle: CheckboxStyle;
  ratingBoxStyle: RatingBoxStyle;
}

interface Props {
  projectName: string;
  onSkip?: () => void;
  onSend?: () => void;
  email?: string;
  style?: Style;
  language?: 'en' | 'sv';
  customTranslations?: Translations;
  customIcons?: IconItem[];
}
export interface Translations {
  title: string;
  description: string;
  feedbackQuestion: string;
  feedbackPlaceholder: string;
  emailPlaceholder: string;
  sendButton: string;
  skipButton: string;
  satisfactionQuestion: string;
  answerFurtherQuestions: string;
  ratingTranslations: {
    one: string;
    two: string;
    three: string;
    four: string;
    five: string;
  };
}

interface DefaultTranslations {
  en: Translations;
  sv: Translations;
}

const defaultTranslations: DefaultTranslations = {
  en: {
    title: 'We value your feedback',
    description: 'Help us improve your experience!',
    feedbackQuestion:
      'What do you like most about {projectName}? Is there anything you feel is missing or could be improved?',
    feedbackPlaceholder: 'Your Feedback',
    emailPlaceholder: 'Email Address',
    sendButton: 'Send',
    skipButton: 'Skip',
    satisfactionQuestion: 'How satisfied are you with ',
    answerFurtherQuestions:
      'I will gladly answer further questions through email',
    ratingTranslations: {
      one: 'Not Satisfied at all',
      two: 'Not very Satisfied',
      three: 'Neutral',
      four: 'Satisfied',
      five: 'Very Satisfied',
    },
  },
  sv: {
    title: 'Vi värdesätter din feedback',
    description: 'Hjälp oss göra din upplevelse bättre!',
    feedbackQuestion:
      'Vad gillar du mest med {projectName}? Är det något du tycker saknas eller hade kunnat förbättras?',
    feedbackPlaceholder: 'Feedback',
    emailPlaceholder: 'Email',
    sendButton: 'Skicka',
    skipButton: 'Skippa',
    satisfactionQuestion: 'Hur nöjd är du med ',
    answerFurtherQuestions: 'Jag svarar gärna på fler frågor via email.',
    ratingTranslations: {
      one: 'Inte alls Nöjd',
      two: 'Inte så Nöjd',
      three: 'Neutral',
      four: 'Nöjd',
      five: 'Väldigt Nöjd',
    },
  },
}

export const FeedbackForm: React.FC<Props> = ({
  style = defaultStyle,
  onSend,
  onSkip,
  email,
  projectName,
  language = 'sv',
  customTranslations,
  customIcons,
}) => {
  const [selectedIconIndex, setSelectedIconIndex] = useState<number | null>(
    null
  )
  const [feedbackText, setFeedbackText] = useState<string>('')
  const [contactEmail, setContactEmail] = useState<string>(email || '')
  const [contactPermission, setContactPermission] = useState<boolean>(false)
  const [userDidSkip, setUserDidSkip] = useState<boolean>(false)
  const translations: Translations = {
    ...defaultTranslations[language],
    ...customTranslations,
  }

  const styles = StyleSheet.create({
    modal: {
      backgroundColor: style.backgroundColor,
      fontFamily: style.primaryFont,
      position: 'absolute',
      justifyContent: 'center',
      height: '100%',
      width: width,
    },
    margin: {
      marginLeft: 8,
      marginRight: 8,
    },
    title: {
      color: style.textColor,
      fontFamily: style.primaryFont,
      fontSize: 32,
      lineHeight: 32,
      marginLeft: 8,
      marginRight: 8,
      marginTop: 16,
      fontWeight: '600',
    },
    text: {
      color: style.textColor,
      fontFamily: style.secondaryFont,
      fontSize: 16,
      lineHeight: 22,
      margin: 8,
    },
    gap: {
      height: 8,
    },
    inputPlaceholderGap: {
      height: 60,
    },
  })

  const handleOnSend = () => {
    //TODO: Call the useInsights hook
    onSend?.()
  }

  const handleOnSkip = () => {
    setUserDidSkip(true)
    onSkip?.()
  }

  if (userDidSkip) return null
  return (
    <View style={styles.modal}>
      <View style={styles.margin}>
        <ScrollView>
          <Text style={styles.title}>{translations.title}</Text>
          <Text style={styles.text}>{translations.description}</Text>
          <Rating
            projectName={projectName}
            selectedIconIndex={selectedIconIndex}
            setSelectedIconIndex={setSelectedIconIndex}
            translations={translations}
            isCustomTranslation={!!customTranslations}
            customIcons={customIcons}
            style={{
              backgroundColor: style.ratingBoxStyle.backgroundColor,
              textColor: style.ratingBoxStyle.textColor,
              iconTextColor: style.ratingBoxStyle.iconTextColor,
              primaryFont: style.ratingBoxStyle.fontFamily,
              secondaryFont: style.ratingBoxStyle.fontFamily,
            }}
          />
          <Text style={styles.text}>
            {customTranslations
              ? customTranslations.feedbackQuestion
              : translations.feedbackQuestion.replace(
                  '{projectName}',
                  projectName
                )}
          </Text>
          <Input
            onChangeText={(text) => setFeedbackText(text)}
            value={feedbackText}
            multiline={true}
            placeholder={translations.feedbackPlaceholder}
            style={{
              backgroundColor: style.inputStyle.backgroundColor,
              textColor: style.inputStyle.textColor,
              borderColor: style.inputStyle.borderColor,
            }}
          />
          <ContactPermissionCheckbox
            isChecked={contactPermission}
            onChangeCheck={(value) => setContactPermission(value)}
            style={{
              checkedBorderColor: style.checkboxStyle.checkedBorderColor,
              uncheckedBorderColor: style.checkboxStyle.uncheckedBorderColor,
              checkedBackgroundColor:
                style.checkboxStyle.checkedBackgroundColor,
              uncheckedBackgroundColor:
                style.checkboxStyle.uncheckedBackgroundColor,
              checkmarkColor: style.checkboxStyle.checkmarkColor,
              textColor: style.checkboxStyle.textColor,
              fontFamily: style.secondaryFont,
            }}
            translations={translations}
          />
          {!contactPermission && <View style={styles.inputPlaceholderGap} />}
          {contactPermission && (
            <Input
              onChangeText={(value) => setContactEmail(value)}
              value={contactEmail}
              placeholder={translations.emailPlaceholder}
              style={{
                backgroundColor: style.inputStyle.backgroundColor,
                textColor: style.inputStyle.textColor,
                borderColor: style.inputStyle.borderColor,
                fontFamily: style.primaryFont,
              }}
            />
          )}
          <Button
            text={translations.sendButton}
            onPress={handleOnSend}
            style={{
              backgroundColor: style.buttonsStyle.primaryButtonBackgroundColor,
              textColor: style.buttonsStyle.primaryButtonTextColor,
            }}
          />
          <View style={styles.gap} />
          <Button
            text={translations.skipButton}
            onPress={handleOnSkip}
            style={{
              backgroundColor:
                style.buttonsStyle.secondaryButtonBackgroundColor,
              textColor: style.buttonsStyle.secondaryButtonTextColor,
              fontFamily: style.primaryFont,
            }}
          />
        </ScrollView>
      </View>
    </View>
  )
}