import React from 'react'
import { Button, Icon } from '$core-components'
import { t } from '$themelocalization'
import GeneralTools from './GeneralTools'
import UEditProvider from './ueditProvider'

import './UEditNoSelection.scss'

const UEditNoSelection = ({ onPreviewModeChange, onClose }) => {
  return (
    <div className="uedit-no-selection">
      <div className="no-selection-header">
        <Button onClick={onClose}>
       <span className="back-button">
       <Icon width="17px" height="12px" name="uedit-back-arrow.svg" wrapperClassName="left-arrow"/>{t('UEdit.BackToPreview')}
         </span>
        </Button>
      </div>
      <div className="no-selection-text">
        <div>
          {t('UEdit.StartBySelecting')}
        </div>
      </div>
      <div className="no-selection-image">
        <Icon name="uedit-no-selection-desktop.svg" width="65px" height="65px" wrapperClassName="desktop-no-selection"/>
        <Icon name="uedit-no-selection-mobile.svg" width="65px" height="65px" wrapperClassName="mobile-no-selection"/>
      </div>
      <div className="no-selection-buttons">
        <GeneralTools/>
        <Button className="icon-btn" onClick={UEditProvider.addText}>
          <Icon name="uedit-add-text.svg" width="35px" height="35px"/>
        </Button>
        <Button className="icon-btn" onClick={UEditProvider.addImage}>
          <Icon name="uedit-add-image.svg" width="35px" height="35px"/>
        </Button>
        <Button className="icon-btn" onClick={UEditProvider.addLine}>
          <Icon name="uedit-add-line.svg" width="35px" height="35px"/>
        </Button>
      </div>
    </div>
  )
}

export default UEditNoSelection
