import React, { useState } from 'react';
import { Table, Space, Button, ConfigProvider, Tooltip, Modal, Form, Input } from 'antd';
import Styles from './web.pc.module.less';
import { CopyOutlined, DeleteOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined } from '@ant-design/icons';
import { generateNewId } from 'oak-domain/lib/utils/uuid';
import Pagination from 'oak-frontend-base/es/components/pagination';
const { confirm } = Modal;
export default function Render(props) {
    const { data, methods } = props;
    const { articleMenus, oakFullpath, oakPagination, oakLoading, oakExecuting, oakEntity, entity, entityId, origin = 'qiniu', onMenuClick, empty, execuable } = data;
    const { t, goDetail, onCopy } = props.methods;
    const [editorId, setEditorId] = useState('');
    const IconButton = (props) => {
        const { icon, onClick, disabled, tooltip, style, linkHoverBg = 'var(--oak-bg-color-container-hover)' } = props;
        const Btn = (<Button disabled={disabled} type="link" icon={icon} onClick={onClick} style={style}></Button>);
        return (<ConfigProvider theme={{
                components: {
                    Button: {
                        fontWeight: 600,
                        contentFontSize: 13,
                        borderRadius: 4,
                        controlHeight: 28,
                        linkHoverBg,
                    },
                },
            }}>
                {tooltip ? <Tooltip title={tooltip}>{Btn}</Tooltip> : Btn}
            </ConfigProvider>);
    };
    const menuAttr = [
        {
            title: (articleMenus && articleMenus.length > 0) ? t('name') : t('menu or article'),
            key: 'name',
            dataIndex: 'name',
            width: 600,
            ellipsis: true,
            render: (_, record) => {
                return (<div className={Styles.name} onClick={() => {
                        onMenuClick(record.id, record.name, record.isArticle);
                    }}>{record.name}</div>);
            }
        },
        {
            title: t('articleMenu:attr.latestAt'),
            key: 'latestAt',
            dataIndex: 'latestAtStr',
            // width: 180,
            ellipsis: true,
        },
        {
            title: t('common::operate'),
            key: 'operate',
            fixed: 'right',
            render: (_, record) => {
                return (<Space size={[8, 0]}>
                        <IconButton style={{ marginTop: 4 }} tooltip={t('editor')} icon={<EditOutlined />} onClick={() => {
                        setEditorId(record.id);
                    }}></IconButton>
                        <IconButton style={{ marginTop: 4 }} tooltip={t('preview')} icon={<EyeOutlined />} onClick={() => {
                        goDetail(record.id);
                    }}></IconButton>
                        <IconButton style={{ marginTop: 4 }} tooltip={t('copy')} icon={<CopyOutlined />} onClick={(e) => {
                        e.stopPropagation();
                        onCopy(record.id);
                    }}></IconButton>

                        <IconButton tooltip={t('delete')} icon={<DeleteOutlined />} onClick={() => showRemoveConfirm(record.id, record.name)}></IconButton>
                    </Space>);
            },
        }
    ];
    const showRemoveConfirm = (menuId, menuName) => {
        confirm({
            title: t('removeConfirm.title', { name: menuName }),
            icon: <ExclamationCircleFilled />,
            content: <div style={{ color: 'var(--oak-color-error)' }}>{t('removeConfirm.content')}</div>,
            async onOk() {
                try {
                    await methods.execute(undefined, {
                        type: 'success',
                        content: t('success.remove')
                    }, undefined, [
                        {
                            entity: 'articleMenu',
                            operation: {
                                id: generateNewId(),
                                action: 'remove',
                                data: {},
                                filter: {
                                    id: menuId,
                                },
                            },
                        },
                    ]);
                }
                catch (err) {
                    methods.setMessage({
                        type: 'error',
                        content: t('fail.remove') + err?.message
                    });
                }
            },
            okButtonProps: {
                danger: true,
            },
            okText: t('common::action.confirm'),
            cancelText: t('common::action.cancel')
        });
    };
    return (<>
            <Table rowKey='id' dataSource={articleMenus} loading={oakLoading} columns={menuAttr} locale={{
            emptyText: empty,
        }} pagination={false}/>
            <div style={{
            display: "flex",
            flexDirection: "row-reverse",
            alignItems: "center",
        }}>
                <Pagination oakPath={oakFullpath} entity={oakEntity} oakAutoUnmount={true} showQuickJumper={true}/>
            </div>
            {editorId !== '' && (<Modal title={t('editorName')} closable open={editorId !== ''} okText={t('common::action.confirm')} cancelText={t('common::action.cancel')} onOk={async () => {
                try {
                    await methods.execute(undefined, {
                        type: 'success',
                        content: t('success.editorName')
                    });
                    setEditorId('');
                }
                catch (err) {
                    methods.setMessage({
                        type: 'error',
                        content: t('fail.update') + err?.message
                    });
                }
            }} okButtonProps={{
                disabled: !execuable || oakLoading || oakExecuting,
            }} onCancel={() => {
                methods.clean();
                setEditorId('');
            }}>
                    <Form>
                        <Form.Item label={t('menuName')} required>
                            <Input value={articleMenus?.find((ele) => ele.id === editorId)?.name || ''} onChange={(e) => {
                methods.updateItem({
                    name: e.target.value.trim(),
                }, editorId);
            }} maxLength={20} showCount autoFocus/>
                        </Form.Item>
                    </Form>
                </Modal>)}
        </>);
}