import * as React from 'react'
import Cropper from 'react-easy-crop'

import { Accept, Cover, Decline, FileLoader, Overlay, Edit, Upload, Description, Action } from './GameCover.style'
import IconComponent, { IconList } from 'app/components/blocks/icon/icon.component'

export const GameCoverView = ({
  handleFocusFileLoader,
  onFileChange,
  fileLoader,
  image,
  crop,
  zoom,
  aspect,
  onCropChange,
  onCropComplete,
  onZoomChange,
  clearUpload,
  saveCover,
  cover,
  isOwner
}) => {
  return (
    <>
      <Cover background={cover}>
        {isOwner &&
        (cover ?
          <Edit onClick={handleFocusFileLoader}>
            <IconComponent icon={IconList.photos} />
              Изменить
          </Edit>
          :
          <Action>
            <Upload onClick={handleFocusFileLoader}>
              <IconComponent icon={IconList.photos} />
                Загрузи фото
            </Upload>
            <Description>
              Чтобы большее количество
              <br />
              людей увидело твою игру
            </Description>
          </Action>
        )
        }
      </Cover>
      <FileLoader
        type='file'
        onChange={onFileChange}
        ref={fileLoader}
        accept='image/*'
      />
      {image &&
        <Overlay>
          <Cropper
            image={image}
            crop={crop}
            zoom={zoom}
            aspect={aspect}
            onCropChange={onCropChange}
            onCropComplete={onCropComplete}
            onZoomChange={onZoomChange}
            maxZoom={2}
            showGrid={false}
          />
          <Decline onClick={clearUpload}>
            <IconComponent icon='cross' />
          </Decline>
          <Accept onClick={saveCover} />
        </Overlay>
      }
    </>
  )
}