import Bind from "@web-atoms/core/dist/core/Bind";
import XNode from "@web-atoms/core/dist/core/XNode";
import {AtomPageLink} from "@web-atoms/core/dist/web/controls/AtomPageLink";
import { AtomWindow } from "@web-atoms/core/dist/web/controls/AtomWindow";
import AppStore from "@web-atoms/online-editor/images/app-store.png";
import GooglePlay from "@web-atoms/online-editor/images/google-play.png";
import AtomSwitch from "@web-atoms/web-controls/dist/switch/AtomSwitch";
import QRCodeView from "../../controls/qr-code/QRCodeView";
import PublishStyle from "./PublishStyle";
import PublishViewModel from "./PublishViewModel";
import { SharePageLinkStyle } from "./styles/SharePageLinkStyle";

const appStoreLink = "https://apps.apple.com/us/app/id1516606498";

const googlePlayLink = "https://play.google.com/store/apps/details?id=in.webatoms.debugger";

export default class Publish extends AtomWindow {

    public viewModel: PublishViewModel;

    public create() {

        this.defaultControlStyle = PublishStyle;
        this.viewModel = this.resolve(PublishViewModel);

        this.render(<AtomWindow>
            <AtomWindow.windowTemplate>
                <div>

                    {/* <div>
                        <div>Download Web Atoms Playground app from following locations</div>
                        <div>
                            <a
                                class="store-button"
                                href={appStoreLink}
                                target="_blank"><img src={AppStore}/></a>
                            <a
                                class="store-button"
                                href={googlePlayLink}
                                target="_blank"><img src={GooglePlay}/></a>
                        </div>
                    </div>

                    <div>
                        After downloading the app, open following QR Code from your phone's camera.<br/>
                        On Android, download some QR Code scanner app to open this sample.
                    </div> */}

                    <div>
                        <a href={Bind.oneWay(() => this.viewModel.finalUrl)} target="blank">
                            <button>Open View in New Tab</button>
                        </a>
                    </div>

                    <QRCodeView
                        code={Bind.oneWay(() =>
                            this.viewModel.finalUrl)}
                        />
                    {/* <div>
                        <AtomSwitch value={Bind.twoWays(() => this.viewModel.wrap)} />
                        Open in Navigation Page
                    </div>
                    <div>
                        <AtomSwitch value={Bind.twoWays(() => this.viewModel.designMode)} />
                        Enable DesignMode (mock)
                    </div> */}
                    <div>
                    <AtomPageLink
						controlStyle={SharePageLinkStyle}
						style="display: inline-block;
                        color: white;
                        background-color: #0077ff;
                        border: 1px solid;
                        padding: 5px 15px;
                        border-radius: 5px;"
						for="span">
						<i class="fas fa-share" style="padding-right: 5px;"></i> Share
						<AtomPageLink.page>
							<div
								class="page">
								<div class="follow-us">
									<button style="margin-left: 10px"
									class="fab fa-facebook-f" title="Facebook"
									eventClick={Bind.event((x) => x.viewModel.parent.shareLink("facebook", (x.viewModel)))} >
									</button>
									<button  class="fab fa-twitter" title="Twitter"
									eventClick={Bind.event((x) => x.viewModel.parent.shareLink("twitter", (x.viewModel)))} >
									</button>
									<button  class="fab fa-pinterest" title="Pinterest"
									eventClick={Bind.event((x) => x.viewModel.parent.shareLink("pinterest", (x.viewModel)))} >
									</button>
									<button  class="fab fa-linkedin-in" title="Linkedin"
									eventClick={Bind.event((x) => x.viewModel.parent.shareLink("linkedin", (x.viewModel)))} >
									</button>
									<button class="fab fa-skype"  title="Skype"
									eventClick={Bind.event((x) => x.viewModel.parent.shareLink("skype", (x.viewModel)))}>
									</button>
									<button class="far fa-clone" title="Copy Link"
									eventClick={Bind.event((x) => ((x.viewModel) ? x.viewModel.parent : undefined).copyLink((x.viewModel)))}></button>
								</div>
							</div>
						</AtomPageLink.page>
					</AtomPageLink>
                    </div>
                </div>
            </AtomWindow.windowTemplate>
        </AtomWindow>);
    }

}