import React, { FunctionComponent } from "react"

import {
    CommandBar,
    IContextualMenuItem,
    ContextualMenuItemType,
    SearchBox,
    Separator,
    Button,
    CommandBarButton,
    IIconProps,
    IconButton
} from "office-ui-fabric-react"
import {
    getCompanyDisplayName,
    IUserSetting
} from "../../../../../datastore/entities/storage/static/userSettings"
import { Connection } from "../../../../../api/securityApi"
import ActionBar from "../../actionBar/ActionBar"
import { useAppContext } from "../../../context"
import { useDropzone } from "react-dropzone"
import { exceptionHandler } from "../../../../../nCommon/telemetry"
import { PhotonApi, CreateFile } from "../../../../../api/photonApi"
import { PhotonApiClient } from "../../../../../api/photonApiClient"
import { uploadBlobFile } from "../../../../../api/fetch"
import { checkFileTypeBanned } from "../FileManager"

interface IProps {
    onRefresh: () => void
    onAddFile: () => void
    onCompanySwitch: (company: string) => void
    targetCompany: string
    onSearch: (input: string) => void
    onRejectFileType: () => void
}

const onRenderVerticalDivider = (item: any): React.ReactNode => {
    return (
        <Separator
            vertical
            styles={{
                root: { marginTop: 6, marginBottom: 6 }
            }}
        />
    )
}

const onUpload = async (file: CreateFile, binaryData: any) => {
    const api = new PhotonApiClient()
    const textResponse = await api.createFile(file)
    console.info(textResponse)
    const blob = new Blob([binaryData], {
        type: file.fileType
    })
    const response = await uploadBlobFile(
        textResponse.text,
        file.fileType,
        blob
    )
    console.info(response)
}

const generateCommandBarOptions = (
    isTachyon: boolean,
    onRefresh: () => void,
    onAddFile: () => void,
    targetCompany: string,
    generateCompanyOptions: () => IContextualMenuItem[],
    onRenderSearchBar: (item: any) => React.ReactNode,
    onRenderUploadButton: (item: any) => React.ReactNode
): IContextualMenuItem[] => {
    const options: IContextualMenuItem[] = []
    options.push({
        key: "filter",
        name: "Filter",
        title: "Filter",
        onRender: onRenderSearchBar
    })
    options.push({
        key: "divider1",
        name: "",
        title: "",
        onRender: onRenderVerticalDivider
    })
    if (isTachyon) {
        options.push({
            key: "company",
            name: getCompanyDisplayName(targetCompany),
            title: "Switch Company",
            iconOnly: false,
            iconProps: {
                iconName: "Org"
            },
            split: false,
            subMenuProps: {
                items: generateCompanyOptions()
            }
        })
    }
    options.push(
        {
            key: "refresh",
            name: "Refresh",
            title: "Refresh",
            iconOnly: isTachyon,
            iconProps: {
                iconName: "Sync"
            },
            onClick: onRefresh
        },
        {
            key: "divider2",
            name: "",
            title: "",
            onRender: onRenderVerticalDivider
        },
        {
            key: "upload",
            name: "Upload",
            title: "upload",
            onRender: onRenderUploadButton
        }
    )
    return options
}

const CmdBar: FunctionComponent<IProps> = ({
    onRefresh,
    onAddFile,
    onCompanySwitch,
    targetCompany,
    onSearch,
    onRejectFileType
}) => {
    const ctx = useAppContext()
    const settings = ctx.settings
    const isTachyon = settings
        ? settings.baseCompany === Connection.Tachyus_com
        : false
    const switchCompany = (
        ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
        item?: IContextualMenuItem
    ) => {
        if (item) {
            console.info({ item })
            onCompanySwitch(item.key)
        }
    }

    const onDrop = (acceptedFiles: any) => {
        if (checkFileTypeBanned(acceptedFiles)) {
            onRejectFileType()
            return
        } else {
            const reader = new FileReader()
            reader.onabort = () => console.info("file reading was aborted")
            reader.onerror = () => console.info("file reading has failed")
            reader.onload = () => {
                const binaryStr = reader.result
                if (binaryStr) {
                    const file = new CreateFile({
                        name: acceptedFiles[0].name,
                        fileType: acceptedFiles[0].type
                    })
                    try {
                        console.info(reader.result)
                        console.info({ binaryStr })
                        onUpload(file, binaryStr)
                        // setState({...state,
                        //     showPanel: true
                        // })
                    } catch (e) {
                        exceptionHandler(e)
                    }
                }
            }
            console.info({ acceptedFiles })
            acceptedFiles.forEach((file: any) =>
                reader.readAsBinaryString(file)
            )
        }
    }
    const { getRootProps, getInputProps } = useDropzone({
        onDrop
    })

    const onRenderSearchBar = (item: any): React.ReactNode => {
        return (
            <SearchBox
                styles={{ root: { width: 200, marginTop: 5, marginRight: 5 } }}
                placeholder="Search"
                onEscape={ev => onSearch("")}
                onClear={ev => onSearch("")}
                onSearch={newValue => onSearch(newValue)}
            />
        )
    }

    const uploadIcon: IIconProps = { iconName: "PageAdd" }
    const onRenderUploadButton = (item: any): React.ReactNode => {
        return (
            <div
                {...getRootProps({
                    // onClick: event => console.log(event)
                })}
            >
                <input
                    {...getInputProps({
                        onClick: event => console.log(event)
                        // problem is onClick in getInputProps only fires the first time
                    })}
                />
                <CommandBarButton
                    styles={{
                        root: { marginTop: 15, marginRight: 5 }
                    }}
                    iconProps={uploadIcon}
                    text="Upload"
                />
            </div>
        )
    }

    const renderCompanyOption = (company: string): IContextualMenuItem => {
        return {
            key: company,
            text: getCompanyDisplayName(company),
            checked: company === targetCompany,
            onClick: switchCompany
        }
    }

    const generateCompanyOptions = (): IContextualMenuItem[] => {
        return [
            renderCompanyOption(Connection.Tachyus_com),
            {
                key: "divider1",
                text: "",
                itemType: ContextualMenuItemType.Divider
            },
            renderCompanyOption(Connection.Seneca),
            renderCompanyOption(Connection.Vaquero),
            {
                key: "divider2",
                text: "",
                itemType: ContextualMenuItemType.Divider
            },
            renderCompanyOption(Connection.Pae),
            renderCompanyOption(Connection.Vista),
            renderCompanyOption(Connection.Ypf),
            {
                key: "divider3",
                text: "",
                itemType: ContextualMenuItemType.Divider
            },
            renderCompanyOption(Connection.Pttep),
            renderCompanyOption(Connection.Equinor)
        ]
    }

    return (
        <div>
            <ActionBar>
                <CommandBar
                    items={generateCommandBarOptions(
                        isTachyon,
                        onRefresh,
                        onAddFile,
                        targetCompany,
                        generateCompanyOptions,
                        onRenderSearchBar,
                        onRenderUploadButton
                    )}
                />
            </ActionBar>
        </div>
    )
}

export default CmdBar