import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SImage } from '../../common/s-components/s-image';
import { SH4 } from '../../common/s-components/typography/s-h4';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { SCentered } from '../../common/s-components/layout/s-centered';
import { TStep } from '../types';
import { LoadingOverlay } from '../../common/components/loading-overlay';

type TProps = {
  titleWidth: number;
  width: number;
  descriptionWidth: number;
  data: TStep;
  variant: 'changelog' | 'onboarding';
};

export const Instructions: React.FC<TProps> = memo(props => {
  const { titleWidth, descriptionWidth, variant, width, data } = props;
  const { text, description, uri, verticalOffset } = data;
  const isChangelog = variant === 'changelog';

  return (
    <SBox width={width} alignItems="center" px={16}>
      <SBox mt={verticalOffset || 0}>
        <SBox
          alignSelf="center"
          width={isChangelog ? 344 : undefined}
          height={isChangelog ? 328 : undefined}
          maxWidth={344}
          maxHeight={328}
        >
          <SCentered position="relative">
            <SBox position="absolute">
              <LoadingOverlay />
            </SBox>
            <SImage
              source={uri}
              width={isChangelog ? 344 : undefined}
              height={isChangelog ? 328 : undefined}
              maxWidth={344}
              maxHeight={328}
            />
          </SCentered>
        </SBox>
        <SBox mt={22} alignItems="center">
          {text.map(line => (
            <SH2
              key={line}
              lineHeight="24px"
              textAlign="center"
              maxWidth={titleWidth}
            >
              {line}
            </SH2>
          ))}
        </SBox>
        <SBox mt={11} alignItems="center">
          {description.map(line => (
            <SH4
              key={line}
              textAlign="center"
              lineHeight="20px"
              normal
              maxWidth={descriptionWidth}
            >
              {line}
            </SH4>
          ))}
        </SBox>
      </SBox>
    </SBox>
  );
});