import json
from trame.widgets import html, vuetify3 as vuetify
from trame.app import get_server

server = get_server()


class FileSelect(vuetify.VCard):
    def __init__(
        self,
        import_function,
        export_function,
        ui_action_name="ui_action_name",
        ui_selected_config_file="ui_selected_config_file",
        state_export="state_export",
        ui_action_message="ui_action_message",
    ):
        def submit_import():
            files = server.state[ui_selected_config_file]
            if files and len(files) > 0:
                file_content = server.state[ui_selected_config_file][0]["content"]
                import_function(json.loads(file_content.decode()))

        super().__init__()
        with self:
            with vuetify.VCardText(v_show=ui_action_name):
                vuetify.VBtn(
                    flat=True,
                    icon="mdi-close",
                    style="float: right",
                    click=f"{ui_action_name} = undefined",
                )
                vuetify.VCardTitle(
                    "{{ %s }}" % ui_action_message,
                    v_show=ui_action_message,
                )
                with html.Div(v_show=f"!{ui_action_message}"):
                    vuetify.VCardTitle("{{ %s }} File Select" % ui_action_name)

                    vuetify.VFileInput(
                        v_model=ui_selected_config_file,
                        v_show=f"{ui_action_name} === 'Import'",
                        accept=".json",
                        label="Config File",
                    )
                    vuetify.VBtn(
                        v_show=f"{ui_action_name} === 'Import' && {ui_selected_config_file}",
                        variant="tonal",
                        text=(ui_action_name,),
                        click=submit_import,
                        style="width: 100%",
                    )

                    vuetify.VTextField(
                        v_model=ui_selected_config_file,
                        v_show=f"{ui_action_name} === 'Export' && {ui_selected_config_file} != false",
                        label="Download Location",
                        prepend_icon="mdi-paperclip",
                        # FileSystem API is only available on some browsers:
                        # https://caniuse.com/native-filesystem-api
                        click="""
                            if ($event){
                                try {
                                    window.showSaveFilePicker({
                                        suggestedName: 'pan3d_state.json',
                                        types: [{
                                            accept: {
                                                'application/json': ['.json']
                                            }
                                        }]
                                    }).then((handle) => {
                                        handle.createWritable().then((writable) => {
                                            writable.write(JSON.stringify(%s, null, 4));
                                            writable.close();
                                            %s = 'Export complete.'
                                        })
                                    });
                                } catch {
                                    %s = false;
                                    window.alert('Your browser does not support selecting a download location. Your download will be made to the default location, saved as pan3d_state.json.')
                                }
                            }
                        """
                        % (state_export, ui_action_message, ui_selected_config_file),
                    )
                    vuetify.VBtn(
                        v_show=f"{ui_action_name} === 'Export' && {ui_selected_config_file} === false",
                        variant="tonal",
                        text="Download pan3d_state.json",
                        click=f"""
                            var content = JSON.stringify({state_export}, null, 4);
                            var a = window.document.createElement('a');
                            a.href = 'data:application/json;charset=utf-8,'  + encodeURIComponent(content);
                            a.download = 'pan3d_state.json';
                            a.style.display = 'none';
                            window.document.body.appendChild(a);
                            a.click()
                            window.document.body.removeChild(a);
                            {ui_action_message} = 'Export complete.'
                        """,
                        style="width: 100%",
                    )
