import React from 'react';
import { useTranslation } from 'react-i18next';
import { UserInformationProps } from '../utils/types';
import { UserInformationWrapper } from './style';

const UserInformation = (props: UserInformationProps): JSX.Element => {
  const { t } = useTranslation();

  const { extra, kdsLayout, deliveryAddress, comments, users } = props;

  const taxId =
    extra && extra['x-tax-id'] ? (
      <div style={{ backgroundColor: '#FF4833', marginBottom: '10px' }}>
        TAX-ID/NIP :
        <span style={{ fontWeight: 'bold' }}>{extra['x-tax-id']}</span>
      </div>
    ) : null;
  return (
    <UserInformationWrapper>
      <div>
        {kdsLayout !== 'compact' && Object.keys(deliveryAddress).length > 0 && (
          <>
            <strong style={{ marginRight: '5px' }}>
              {t('OS.KDS.Card.Address')}:
            </strong>
            <span>
              {` ${deliveryAddress.city}, ${deliveryAddress.street} ${
                deliveryAddress.number
              } ${deliveryAddress.door ? `/ ${deliveryAddress.door}` : ''}`}
            </span>
          </>
        )}
        {comments &&
          comments.map((comment) => (
            <div key={comment.id}>
              {comment && comment.comment && comment.comment !== '' && (
                <div
                  style={{
                    maxWidth: '525px',
                    height: '100%',
                    wordWrap: 'break-word',
                  }}
                >
                  <strong style={{ marginRight: '5px' }}>
                    {' '}
                    {t('OS.KDS.Card.Comment')}:
                  </strong>
                  <span>{comment.comment}</span>
                </div>
              )}
            </div>
          ))}
      </div>
      <div>
        {kdsLayout !== 'compact' &&
          users &&
          users.map((user) => (
            <div key={user.userId}>
              {user && user.phone && user.phone !== '' && (
                <>
                  <strong style={{ marginRight: '5px' }}>
                    {' '}
                    {t('OS.KDS.Card.Phone')}:
                  </strong>
                  <span>+{user.phone}</span>
                </>
              )}
            </div>
          ))}
        {taxId}
      </div>
    </UserInformationWrapper>
  );
};

export default UserInformation;