import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { isOutputColumnStep } from '@data-wrangling-components/core';
import { NodeInput } from '@essex/dataflow';
import isNil from 'lodash-es/isNil.js';
import { memo, useMemo } from 'react';
import styled from 'styled-components';
function VerbDescriptionFn({ step , rows: rows1 , output , showInput , showOutput , showOutputColumn , style  }) {
    const rws = useMemo(()=>{
        function loop(rows) {
            return rows.map((row, index)=>/*#__PURE__*/ _jsxs(Row, {
                    title: row.title,
                    children: [
                        /*#__PURE__*/ _jsxs(KeyValue, {
                            children: [
                                row.before ? /*#__PURE__*/ _jsx(Key, {
                                    children: row.before
                                }) : null,
                                isNil(row.value) ? /*#__PURE__*/ _jsx(Unset, {}) : /*#__PURE__*/ _jsx(Value, {
                                    title: row.value,
                                    children: row.value
                                }),
                                row.after ? /*#__PURE__*/ _jsx(Key, {
                                    children: row.after
                                }) : null
                            ]
                        }),
                        row.sub ? loop(row.sub) : null
                    ]
                }, `verb-description-row-${row.value}-${index}`));
        }
        return loop(rows1);
    }, [
        rows1
    ]);
    const shouldShowOutputColumn = showOutputColumn && isOutputColumnStep(step);
    const input = step.input[NodeInput.Source]?.node;
    return /*#__PURE__*/ _jsxs(Container, {
        style: style,
        children: [
            /*#__PURE__*/ _jsx(Verb, {
                children: step.verb
            }),
            showInput ? /*#__PURE__*/ _jsx(Row, {
                children: /*#__PURE__*/ _jsxs(KeyValue, {
                    children: [
                        /*#__PURE__*/ _jsx(Key, {
                            children: "table"
                        }),
                        !input ? /*#__PURE__*/ _jsx(Unset, {}) : /*#__PURE__*/ _jsx(Value, {
                            children: input
                        })
                    ]
                })
            }) : null,
            rws,
            showOutput ? /*#__PURE__*/ _jsx(Row, {
                children: /*#__PURE__*/ _jsxs(KeyValue, {
                    children: [
                        /*#__PURE__*/ _jsx(Key, {
                            children: "into table"
                        }),
                        !output ? /*#__PURE__*/ _jsx(Unset, {}) : /*#__PURE__*/ _jsx(Value, {
                            children: output
                        })
                    ]
                })
            }) : null,
            shouldShowOutputColumn ? /*#__PURE__*/ _jsx(Row, {
                children: /*#__PURE__*/ _jsxs(KeyValue, {
                    children: [
                        /*#__PURE__*/ _jsx(Key, {
                            children: "as column"
                        }),
                        !step.args.to ? /*#__PURE__*/ _jsx(Unset, {}) : /*#__PURE__*/ _jsx(Value, {
                            children: step.args.to
                        })
                    ]
                })
            }) : null
        ]
    });
}
export const VerbDescription = /*#__PURE__*/ memo(VerbDescriptionFn);
const Container = styled.div`
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 180px;
`;
const Verb = styled.div`
	text-transform: uppercase;
	font-weight: bold;
	align-items: center;
	width: 100%;
	color: ${({ theme  })=>theme.application().midContrast().hex()};
`;
const Row = styled.div`
	padding-left: 8px;
	display: flex;
	flex-direction: column;
`;
const KeyValue = styled.div`
	display: flex;
	justify-content: flex-start;
	gap: 4px;
`;
const Key = styled.div``;
const Unset = styled.div`
	color: ${({ theme  })=>theme.application().lowContrast().hex()};
	&:before {
		content: 'unset';
	}
`;
const Value = styled.div`
	max-width: 240px;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight: bold;
	color: ${({ theme  })=>theme.application().midContrast().hex()};
`;
