/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from '@essex/styled-components';
import { memo, useCallback, useEffect, useState } from 'react';
import { Else, If, Then } from 'react-if';
import { RenameCallout } from './RenameCallout.js';
/**
 * Renders the table name if passed, or the option to rename the name if the function
 * onRenameTable is passed to be called when clicking save or pressing enter on the callout
 */ export const TableName = /*#__PURE__*/ memo(function TableName({ onRenameTable , name , color ,  }) {
    const [isEditing, setIsEditing] = useState(false);
    const [editedName, setEditedName] = useState(name || '');
    useEffect(()=>{
        setEditedName(name);
    }, [
        name,
        setEditedName
    ]);
    const onChange = useCallback((_e, value)=>{
        setEditedName(value);
    }, [
        setEditedName
    ]);
    const onSend = useCallback((newName)=>{
        // if the user enters an empty value, save the previous value
        const incomingName = !newName ? name : newName;
        onRenameTable && onRenameTable(incomingName);
        setIsEditing(false);
        setEditedName(incomingName);
    }, [
        onRenameTable,
        setIsEditing,
        setEditedName,
        name
    ]);
    return /*#__PURE__*/ _jsx(Container, {
        children: /*#__PURE__*/ _jsxs(If, {
            condition: !!onRenameTable,
            children: [
                /*#__PURE__*/ _jsx(Then, {
                    children: /*#__PURE__*/ _jsxs(Container, {
                        children: [
                            /*#__PURE__*/ _jsx(H3Editable, {
                                color: color,
                                id: "editName",
                                title: "Edit",
                                onClick: ()=>setIsEditing(true),
                                children: name
                            }),
                            /*#__PURE__*/ _jsx(If, {
                                condition: isEditing,
                                children: /*#__PURE__*/ _jsx(Then, {
                                    children: /*#__PURE__*/ _jsx(RenameCallout, {
                                        onSend: onSend,
                                        editedName: editedName,
                                        onChange: onChange,
                                        name: name
                                    })
                                })
                            })
                        ]
                    })
                }),
                /*#__PURE__*/ _jsx(Else, {
                    children: /*#__PURE__*/ _jsx(If, {
                        condition: name,
                        children: /*#__PURE__*/ _jsx(Then, {
                            children: /*#__PURE__*/ _jsx(H3, {
                                color: color,
                                children: name
                            })
                        })
                    })
                })
            ]
        })
    });
});
const H3 = styled.h3`
	font-weight: normal;
	font-size: 0.8em;
	margin-right: 8px;
	color: ${({ theme , color  })=>color || theme.palette.white};
`;
const H3Editable = styled(H3)`
	cursor: pointer;
	border-bottom: 1px dotted ${({ theme  })=>theme.palette.white};
`;
const Container = styled.div``;
