import { React, useState } from 'react'
import { createPortal } from 'react-dom'
import styled from 'styled-components'

import ImageUpload from './ImageUpload'

const Button = styled.button`
  font-weight: 500;
  background: #fff;
  color: #f00;
  padding: 8px 16px;
  margin: 8px 0 0;
`

function ImageGallery({ id }) {
  const [visible, setVisible] = useState(false);

  const clickHandle = () => {
    setVisible(true);
    document.querySelector('body').style.overflow = 'hidden';
  }

  return (
    <>
      <Button type="button" onClick={clickHandle}>Chọn ảnh</Button>

      {visible && createPortal(
        <ImageUpload id={id} setVisible={setVisible} />
        ,
        document.body
      )}
    </>
  );
}

export default ImageGallery