/*
 * Copyright (C) 2019 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import React from 'react'
import {bool, func} from 'prop-types'
import {CloseButton} from '@instructure/ui-buttons'
import {Heading} from '@instructure/ui-elements'
import {Flex, FlexItem} from '@instructure/ui-layout'
import {Tray} from '@instructure/ui-overlays'

import formatMessage from '../../../../format-message'
import {htmlImageElement} from '../../shared/EditorContentPropTypes'

export default function ImageOptionsTray(props) {
  const {imageElement, onRequestClose, open} = props

  return (
    <Tray
      label={formatMessage('Image Options Tray')}
      onDismiss={onRequestClose}
      onEntered={props.onEntered}
      onExited={props.onExited}
      open={open}
      placement="end"
      shouldCloseOnDocumentClick
      shouldContainFocus
      shouldReturnFocus
    >
      <Flex direction="column" height="100vh">
        <FlexItem as="header" padding="medium">
          <Flex direction="row">
            <FlexItem grow shrink>
              <Heading as="h2">Image Stuff</Heading>
            </FlexItem>

            <FlexItem>
              <CloseButton onClick={onRequestClose}>{formatMessage('Close')}</CloseButton>
            </FlexItem>
          </Flex>
        </FlexItem>

        <FlexItem as="div" padding="medium">
          <img alt={imageElement.alt} src={imageElement.src} />
        </FlexItem>
      </Flex>
    </Tray>
  )
}

ImageOptionsTray.propTypes = {
  imageElement: htmlImageElement,
  onEntered: func,
  onExited: func,
  onRequestClose: func.isRequired,
  open: bool.isRequired
}

ImageOptionsTray.defaultProps = {
  onEntered: null,
  onExited: null
}

@@ -874,18 +874,8 @@
 Flex
-, FlexItem
 %7D fr
@@ -1528,32 +1528,33 @@
 %22%3E%0A        %3CFlex
+.
 Item as=%22header%22
@@ -1618,24 +1618,25 @@
        %3CFlex
+.
 Item grow sh
@@ -1704,32 +1704,33 @@
           %3C/Flex
+.
 Item%3E%0A%0A         
@@ -1733,24 +1733,25 @@
        %3CFlex
+.
 Item%3E%0A      
@@ -1845,32 +1845,33 @@
           %3C/Flex
+.
 Item%3E%0A          
@@ -1888,24 +1888,25 @@
       %3C/Flex
+.
 Item%3E%0A%0A     
@@ -1909,24 +1909,25 @@
        %3CFlex
+.
 Item as=%22div
@@ -2024,16 +2024,17 @@
   %3C/Flex
+.
 Item%3E%0A  

fix outdated import in canvas-rce