import React from "react";
import {useDispatch, useSelector} from "react-redux";
import {hasPermissionErrorInCall} from "../utils/helpers";

//strings
import strings from "../constants/localization";

//actions
import {chatModalCallError as chatModalCallErrorAction} from "../actions/chatActions";

//components
import Modal, {ModalBody, ModalHeader, ModalFooter} from "../../../Talk-ui-kit/src/modal";
import Container from "../../../Talk-ui-kit/src/container";
import {Button} from "../../../Talk-ui-kit/src/button";
import Gap from "../../../Talk-ui-kit/src/Gap";
import {Heading, Text} from "../../../Talk-ui-kit/src/typography";

//styling

//statics

//functions


export default function ({error}) {

  const chatModalCallError = useSelector(store => store.chatModalCallError);
  const isPermissionError = hasPermissionErrorInCall(chatModalCallError.error);
  const dispatch= useDispatch();

  return <Modal isOpen={chatModalCallError.isShowing} inContainer={true} userSelect="none">

    <ModalHeader>
      <Heading h3>{strings.permissionError}</Heading>
    </ModalHeader>

    <ModalBody>
      <Text textAlignJustify>
        {isPermissionError && strings.callPermissionError}
      </Text>
      <Gap y={5}>
        <Text bold>
          {strings.guidedVideo}:
        </Text>
      </Gap>

      <Container display="flex" justifyContent="center" alignItems="center">
        <video src="https://podspace.pod.ir/api/files/9XAWZUX83YKDA387" controls style={{maxWidth: "100%"}}/>
      </Container>
    </ModalBody>

    <ModalFooter>
      <Button text onClick={e => dispatch(chatModalCallErrorAction(false, null))}>{strings.close}</Button>
    </ModalFooter>

  </Modal>
}