/* @ts-ignore */
// import * as Linking from 'expo-linking';
import React, { memo } from 'react';
import { Dimensions, Platform, StatusBar } from 'react-native';
import { Button } from '../../common/components/button';
import { SBox } from '../../common/s-components/layout/s-box';
import { SCentered } from '../../common/s-components/layout/s-centered';
import { SImage } from '../../common/s-components/s-image';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { SH4 } from '../../common/s-components/typography/s-h4';
import { BackButton } from '../../common/components/back-button';
import { TSaveUserResponse, TSetVariant, TState } from '../types';
import { CloseVariant, ScreenVariant } from '../constants';
import { updateNpsSurveySkippedAnalytics } from '../services';
// import { fp as _ } from '../../common/utils/fp';
// import { checkDeviceWithSmallWidth } from '../../common/transducers';

const surveyIntroImage = require('../../../assets/survey-intro.png');

const isIOS = Platform.OS === 'ios';

const DEFAULT_TEXT =
  'We use your feedback to improve\n' +
  'our product, so thank you for taking the time\n' +
  'to fill in this survey. It should take you\n' +
  '1-2 minutes to complete it.';

const { width } = Dimensions.get('window');

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

export const Intro = memo((props: TProps) => {
  const { saveUserResponse, setVariant, survey, setStep } = props;

  const cancel = (skipSource: string) => {
    saveUserResponse(CloseVariant.skip);
    setVariant();
    updateNpsSurveySkippedAnalytics(survey, skipSource);
  };

  const handleOpenSurvey = async () => {
    setStep(0);
    setVariant(ScreenVariant.carousel);
  };

  const renderStartButton = () => {
    return (
      <SBox width={178} mt={30}>
        <Button
          testID="start-survey-button"
          variant="primary"
          onPress={handleOpenSurvey}
          width={1}
          px={isIOS ? undefined : 10}
        >
          Start
        </Button>
      </SBox>
    );
  };

  const renderNotNowButton = () => (
    <SBox width={178} mt={16}>
      <Button
        testID="not-now-button"
        variant="request-2"
        onPress={() => cancel('Not now')}
        width={1}
        px={isIOS ? undefined : 10}
      >
        Not Now
      </Button>
    </SBox>
  );

  const renderSplashImage = () => {
    let maxWidth = 343;
    let resizeMode = 'cover';

    if (!isIOS && width < 700) {
      maxWidth = 290;
      resizeMode = 'contain';
    }

    return (
      <SImage
        source={surveyIntroImage}
        maxHeight={265}
        maxWidth={maxWidth}
        resizeMode={resizeMode}
      />
    );
  };

  return (
    <SBox
      position="absolute"
      width="100%"
      height="100%"
      zIndex={1000}
      bg="ebonyClay"
    >
      <SCentered bg="ebonyClay">
        <StatusBar barStyle="light-content" translucent />
        <SBox pl={16} pr={16} alignItems="center" mt={10}>
          <SBox>{renderSplashImage()}</SBox>
          <SBox mt={22}>
            <SBox alignItems="center">
              <SH2 lineHeight="24px">Satisfaction Survey</SH2>
            </SBox>
            <SBox mt={12}>
              <SH4
                normal
                lineHeight="20px"
                // numberOfLines={4}
                textAlign="center"
              >
                {DEFAULT_TEXT}
              </SH4>
            </SBox>
          </SBox>
          <SBox ml={-1}>
            {renderStartButton()}
            {renderNotNowButton()}
          </SBox>
        </SBox>
      </SCentered>
      <BackButton
        testID="intro-back-button"
        onPress={() => cancel("Intro 'x'")}
        marginTop={0}
        left={16}
        top={55}
        iconName="close"
      />
    </SBox>
  );
});