// @flow
import React, { PureComponent } from "react";
import Clipboard from "clipboard-js";
import { Modal, Input, Button, Checkbox } from "antd";
import { connect } from "react-redux";
import Toast from "libs/toast";
import InputComponent from "oxalis/view/components/input_component";
import { setAnnotationPublicAction } from "oxalis/model/actions/annotation_actions";
import messages from "messages";
import type { OxalisState } from "oxalis/store";

class ShareModalView extends PureComponent {
  props: {
    isPublic: boolean,
    isVisible: boolean,
    onOk: () => void,
    setAnnotationPublic: Function,
  };

  getUrl() {
    const loc = window.location;
    // in readonly mode the pathname already contains "/readonly"
    let { pathname } = loc;
    pathname = pathname.replace("/readOnly", "");

    const url = `${loc.origin + pathname}/readOnly${loc.hash}`;
    return url;
  }

  copyToClipboard = async () => {
    const url = this.getUrl();
    await Clipboard.copy(url);
    Toast.success("Position copied to clipboard");
  };

  handleCheckboxChange = (event: SyntheticInputEvent) => {
    const isPublic = event.target.checked;

    // public tracings only work if the dataset is public too
    if (!this.props.isDatasetPublic && isPublic) {
      Toast.warning(messages["annotation.dataset_no_public"], true);
    }
    this.props.setAnnotationPublic(isPublic);
  };

  render() {
    return (
      <Modal
        title="Share"
        visible={this.props.isVisible}
        onOk={this.props.onOk}
        onCancel={this.props.onOk}
      >
        <Input.Group compact>
          <Button style={{ width: "15%" }} onClick={this.copyToClipboard}>
            Copy
          </Button>
          <InputComponent style={{ width: "85%" }} value={this.getUrl()} />
        </Input.Group>
        <Checkbox
          onChange={this.handleCheckboxChange}
          checked={this.props.isPublic}
          style={{ marginTop: 10, marginLeft: 1 }}
        >
          Make tracing publicly viewable without a login.
        </Checkbox>
      </Modal>
    );
  }
}

const mapStateToProps = (state: OxalisState) => ({
  isPublic: state.tracing.isPublic,
  isDatasetPublic: state.dataset.isPublic,
});

const mapDispatchToProps = (dispatch: Dispatch<*>) => ({
  setAnnotationPublic(isPublic: boolean) {
    dispatch(setAnnotationPublicAction(isPublic));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(ShareModalView);

@@ -453,172 +453,374 @@
 %22;%0A%0A
-class ShareModalView extends PureComponent %7B%0A  props: %7B%0A    isPublic: boolean,%0A    isVisible: boolean,%0A    onOk: () =%3E void,%0A    setAnnotationPublic: Function,
+type ShareModalPropType = %7B%0A  isVisible: boolean,%0A  onOk: () =%3E void,%0A  setAnnotationPublic: Function,%0A%7D;%0A%0Aclass ShareModalView extends PureComponent %7B%0A  props: ShareModalPropType;%0A%0A  state: %7B%0A    isPublic: boolean,%0A  %7D = %7B%0A    isPublic: false,%0A  %7D;%0A%0A  componentWillReceiveProps(newProps: ShareModalPropType) %7B%0A    this.setState(%7B isPublic: newProps.isPublic %7D);
 %0A  %7D
-;
 %0A%0A  
@@ -1309,21 +1309,31 @@
 %3E %7B%0A    
-const
+this.setState(%7B
  isPubli
@@ -1333,18 +1333,17 @@
 isPublic
- =
+:
  event.t
@@ -1355,18 +1355,47 @@
 .checked
-;%0A
+ %7D);%0A  %7D;%0A%0A  handleOk = () =%3E %7B
 %0A    // 
@@ -1449,16 +1449,58 @@
 lic too%0A
+    const isPublic = this.state.isPublic;%0A
     if (
@@ -1663,16 +1663,39 @@
 ublic);%0A
+    this.props.onOk();%0A
   %7D;%0A%0A  
@@ -1807,32 +1807,30 @@
  onOk=%7Bthis.
-props.on
+handle
 Ok%7D%0A        
@@ -2194,21 +2194,21 @@
 d=%7Bthis.
-props
+state
 .isPubli
@@ -2285,11 +2285,16 @@
     
-Mak
+Share th
 e tr
@@ -2311,27 +2311,94 @@
 icly
- viewable without a
+. Everyone with this link can access the tracing without the%0A          need for a user
  log

apply public tracing setting on modal confirmation #1942