import React, { memo } from 'react';
import { Alert } from 'react-native';
import { SlideRating } from './slide-rating';
import { SlideText } from './slide-text';
import { CarouselFullscreen } from '../../common/components/carousel/carousel-fullscreen';
import { fp as _ } from '../../common/utils/fp';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { Button } from '../../common/components/button';
// import survery from '../__mocks__/survey.json';
import {
  TUpdate,
  TState,
  TSetVariant,
  TSaveUserResponse,
  TRenderItem,
} from '../types';
import { BackButton } from '../../common/components/back-button';
import { SBox } from '../../common/s-components/layout/s-box';
import { CloseVariant } from '../constants';
import {
  updateNpsSurveySkippedAnalytics,
  updateNpsSurveySubmittedAnalytics,
} from '../services';

type TProps = {
  saveUserResponse: TSaveUserResponse;
  update: TUpdate;
  survey: TState['survey'];
  step: TState['step'];
  setStep: (step: number | null) => void;
  setVariant: TSetVariant;
};

export const WelcomeSurvey = memo((props: TProps) => {
  const { saveUserResponse, survey, update, step, setStep, setVariant } = props;
  const questions = _.path('data.questions', survey);
  // const lastSkip = _.path('data.user_response.skips_num', survey) > 3;
  const answers = _.path('data.user_response.answers', survey);

  const renderItem: TRenderItem = ({ type, message, labels }, index) => {
    if (type === 'rating') {
      return (
        <SlideRating
          labels={labels}
          message={message}
          value={answers[index!].value}
          onChange={value => {
            update({ step: index! + 1!, value });
          }}
        />
      );
    }
    if (type === 'text') {
      return (
        <SlideText
          message={message}
          value={answers[index!].value}
          onChange={value => {
            update({ step: index! + 1, value });
          }}
        />
      );
    }
  };

  const renderHeader = (i: number) => {
    return (
      <>
        <BackButton
          testID="survey-back-button"
          onPress={() => {
            if (i === 0) {
              setVariant();
              update({ step: 1, value: null });
              saveUserResponse(CloseVariant.skip);
              setStep(null);
              updateNpsSurveySkippedAnalytics(survey, `Question ${step! + 1}`);
              return;
            }

            Alert.alert(
              `Are you sure you'd like to close the survey?`,
              `Your previous answers will be submitted, but you won't be able to complete the survey.`,
              [
                {
                  text: 'Cancel',
                  onPress: () => {},
                  style: 'cancel',
                },
                {
                  text: 'Close Survey',
                  onPress: () => {
                    setVariant();
                    update({ step: step! + 1, value: null });
                    saveUserResponse(CloseVariant.skip);
                    setStep(null);
                    updateNpsSurveySkippedAnalytics(
                      survey,
                      `Question ${step! + 1}`
                    );
                  },
                },
              ]
            );
          }}
          marginTop={0}
          left={16}
          top={55}
          iconName="close"
        />
        <SH1 ml={-4} mt={28} mb={10}>
          Survey
        </SH1>
        <SH6 ml={0} color="romanPurple">
          {i + 1} of {questions.length}
        </SH6>
      </>
    );
  };

  const renderFooter = (i: number) => {
    return (
      <SBox mt={-12}>
        <Button
          disabledOpacity={0.3}
          testID="survey-save-button"
          variant="primary"
          disabled={_.isNil(answers[i!].value) && questions[i].type !== 'text'}
          onPress={() => {
            if (i < questions.length - 1) {
              setStep(i + 1);
            } else {
              setVariant();
              saveUserResponse();
              setStep(null);
              updateNpsSurveySubmittedAnalytics(survey);
            }
          }}
          width={1}
        >
          {i === questions.length - 1 ? 'Submit' : 'Save and Continue'}
        </Button>
      </SBox>
    );
  };

  return (
    <CarouselFullscreen
      disableSwipe
      data={questions}
      keyExtractor={({ step }) => step}
      renderItem={renderItem}
      startIndex={step}
      withDots
      dotVariant="top:line"
      renderHeader={renderHeader}
      renderFooter={renderFooter}
    />
  );
});