import * as React from 'react' ; import styled from 'styled-components' ; import { PaperClip } from '@opencrvs/components/lib/icons' ; import { IFileValue , IAttachmentValue } from '@client/forms' ; import { Spinner } from '@opencrvs/components/lib/interface' ; import { withTheme , ITheme } from '@client/styledComponents' ; import { ISelectOption } from '@opencrvs/components/lib/forms' ; const Wrapper = styled . div `
  ${ ( { theme } ) => theme . fonts . bodyStyle };
` ; const PreviewLink = styled . div < { disabled ? : boolean ; } > `
  ${ ( { theme } ) => theme . fonts . bodyBoldStyle };
  color: ${ ( { disabled , theme } ) => disabled ? theme . colors . disabled : theme . colors . primary };
  font-style: normal;
  text-decoration-line: underline;
  padding: 5px 10px;
  margin: 10px 0px;
  display: flex;
  cursor: pointer;
  background: ${ ( { theme } ) => theme . colors . background };
  span {
    margin-left: 8px;
  }

  &:hover span {
    text-decoration: underline;
  }
` ; const ProcessingSpinner = styled ( Spinner ) `
  margin-left: auto;
` ; type IProps = { id ? : string ; documents ? : IFileValue [ ] | null ; processingDocuments ? : Array < { label : string ; } > ; attachment ? : IAttachmentValue ; label ? : string ; theme : ITheme ; onSelect : ( document : IFileValue | IAttachmentValue ) => void ; dropdownOptions ? : ISelectOption [ ] ; } ; class DocumentListPreviewComponent extends React . Component < IProps > { getFormattedLabelForDocType = ( docType ) => { const matchingOptionForDocType = this . props . dropdownOptions && this . props . dropdownOptions . find ( ( option ) => option . value === docType ) ; return matchingOptionForDocType && matchingOptionForDocType . label ; } ; render ( ) { const { id , documents , processingDocuments , label , attachment , theme } = this . props ; return ( < Wrapper id = { `preview-list-${ id }` } > { documents && documents . map ( ( document , key ) => ( < PreviewLink id = { `document_${ ( document . optionValues [ 1 ] as string ) . replace ( /\s/g , '' ) }_link` } key = { key } onClick = { ( _ ) => this . props . onSelect ( document ) } > < PaperClip /> < span > { this . getFormattedLabelForDocType ( document . optionValues [ 1 ] as string ) || document . optionValues [ 1 ] } < /span> < /PreviewLink>))} { processingDocuments && processingDocuments . map ( ( { label } ) => ( < PreviewLink disabled = { true } key = { label } > < PaperClip stroke = { theme . colors . disabled } / > < span > { this . getFormattedLabelForDocType ( label ) || label } < /span> < ProcessingSpinner size = { 24 } id = { `document_${ label }_processing` } /> < /PreviewLink>))} { attachment && attachment . data && label && ( < PreviewLink onClick = { ( _ ) => this . props . onSelect ( attachment ) } > < PaperClip /> < span > { this . getFormattedLabelForDocType ( label ) || label } < /span> < /PreviewLink>)} < /Wrapper>); } } export const DocumentListPreview = withTheme ( DocumentListPreviewComponent ) ;