import React, {FC} from 'react';
import {Image, ImageBackground, TouchableHighlight, View} from 'react-native';
import _ from 'lodash';
import moment from 'moment';
import {IProps} from '@components/Credential/types';
import {
  Wrapper,
  Container,
  imageBackgroundStyles,
  Header,
  View as StyledView,
  ViewLabelStyle,
  CredentialName,
  Title,
  Footer,
  IssueDate,
  Issuer,
  Body,
  IssuerWrapper,
} from '@styles/components/credentials';

const Credential: FC<IProps> = ({onPress, credential, active, onSelect}) => (
  <Wrapper>
    <TouchableHighlight
      testID="crdential"
      onPress={() => _.isFunction(onSelect) && onSelect()}>
      <Container
        colors={
          credential?.selfDeclared
            ? ['#DEF1FF', '#94A5FF']
            : ['#FFF3E8', '#E0FFDF']
        }
        start={{x: 0, y: 1}}
        end={{x: 1, y: 1}}
        testID="credCt">
        <ImageBackground
          source={require('@assets/images/credential/wave.png')}
          style={imageBackgroundStyles}>
          <Header>
            {credential?.selfDeclared && (
              <Image
                source={
                  active
                    ? require('@assets/images/credential/self-declared-logo.png')
                    : require('@assets/images/credential/self-tick.png')
                }
                testID="credImg"
              />
            )}

            {credential?.IssuerId && credential?.IssuerId !== 'Affinidi' ? (
              <Image
                source={require('@assets/images/credential/learnet-logo.png')}
                testID="credImg"
              />
            ) : (
              <View />
            )}

            {!active && <Title>{credential?.VCName}</Title>}
            <StyledView
              title="View"
              variant="text"
              labelStyles={ViewLabelStyle}
              onPress={() => _.isFunction(onPress) && onPress()}
              testID="viewCred"
            />
          </Header>

          <Body>
            <CredentialName testID="credName">
              {credential?.VCName}
            </CredentialName>
          </Body>

          <Footer>
            {active ? (
              <IssueDate testID="credDate">
                Issue date: {moment(credential?.CreatedAt).format('DD-MM-YYYY')}
              </IssueDate>
            ) : (
              <>
                {credential?.selfDeclared && (
                  <Image
                    source={require('@assets/images/credential/self-tick.png')}
                    testID="credImg"
                  />
                )}

                {credential?.IssuerId && credential?.IssuerId !== 'Affinidi' ? (
                  <Image
                    source={require('@assets/images/credential/learnet-logo.png')}
                    testID="credImg"
                  />
                ) : (
                  <View />
                )}

                <Title>{credential?.VCName}</Title>
              </>
            )}

            {credential?.selfDeclared && (
              <IssuerWrapper>
                <Issuer testID="credIssr">Self-declared</Issuer>
              </IssuerWrapper>
            )}

            {!!credential?.IssuerId && (
              <IssuerWrapper>
                <Issuer testID="credIssr">{credential?.IssuerId}</Issuer>
              </IssuerWrapper>
            )}
          </Footer>
        </ImageBackground>
      </Container>
    </TouchableHighlight>
  </Wrapper>
);

export default Credential;
