import * as React from 'react';
import { DataContext } from '@assets/js-shop/context';
import {  translate as _t } from '@assets/js-shop/ShopUtils';
import { Utils } from '@assets/js-shop/cart/Utils';
import { useContext } from 'react';
import config from '@assets/js-shop/config';

export type FreeShippingProps = {
   freeDeliveryFrom: number,
   isFreeShipping?: boolean,
   totalPrice: number,
}

const FreeShipping: React.FC<FreeShippingProps> = ({ freeDeliveryFrom, isFreeShipping, totalPrice}) => {
   const context = useContext(DataContext);

   return (
      <div className='shipping-progress'>
         <span className='fc icons_delivery'/>
         {MODULES.COMPONENTS ? <i className="c-icon" dangerouslySetInnerHTML={{ __html: require('@assets/icons/delivery.svg?raw') }}/> : ''}
         <p>
            {(freeDeliveryFrom <= totalPrice || isFreeShipping)
               ? <strong>{_t('dopravuMateZdarma')}</strong>
               :  <>{_t('kDopraveZbyva')} <strong>{Utils.printPrice(freeDeliveryFrom - totalPrice, context)}</strong></>
            }
         </p>
         <div className='shipping-bar'>
            {(freeDeliveryFrom <= totalPrice || isFreeShipping)
               ? <span/>
               : <span style={{ width: `${(totalPrice / freeDeliveryFrom) * 100}%`}} />
            }
         </div>
      </div>
   )
};

export default FreeShipping;
