import React from 'react';
import styled from 'styled-components';
import { Card } from 'antd';
import DetailGrid from './DetailGrid';

/**
 * Ant Design 방식의 DetailModalWrapper 컴포넌트
 * @param {Array} itemGroups - 표시할 항목 그룹 배열
 * @param {Object} formData - 폼 데이터 객체
 * @param {Function} onChange - 값 변경 시 호출할 함수
 * @param {boolean} disabled - 전체 비활성화 여부
 * @param {number} columnCount - 한 행에 표시할 컬럼 수 (기본값: 4)
 * @param {ReactNode} children - 추가 컨텐츠
 */
const DetailLayout = ({
								   itemGroups,
								   formData,
								   onChange,
								   disabled = false,
								   columnCount = 4,
								   children
							   }) => {
	// 값 변경 핸들러
	const handleChange = (key, value, handler) => {
		// 핸들러가 있으면 핸들러 실행
		if (handler) {
			handler(value, key, formData);
		}

		// 키가 점 표기법이면 중첩 객체 업데이트
		if (key.includes('.')) {
			const [parentKey, childKey] = key.split('.');
			onChange({
				...formData,
				[parentKey]: {
					...formData[parentKey],
					[childKey]: value
				}
			});
		} else {
			// 일반 키는 직접 업데이트
			onChange({ ...formData, [key]: value });
		}
	};

	return (
		<DetailWrapper>
			{itemGroups.map((group, index) => (
				<Card
					key={`group-${index}`}
					title={group.title}
					style={{ marginBottom: 16 }}
				>
					<DetailGrid
						items={group.items}
						formData={formData}
						onChange={handleChange}
						disabled={disabled || group.disabled}
						columnCount={group.columnCount || columnCount}
					/>
				</Card>
			))}
			{children}
		</DetailWrapper>
	);
};

const DetailWrapper = styled.div`
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
`;

export default DetailLayout;

//예시
// const itemGroupsExample = [
// 	{
// 		title: '기본 정보',
// 		items: [
// 			{
// 				row: 0,
// 				col: 0,
// 				colSpan: 2,
// 				type: 'text',
// 				key: 'title',
// 				label: '제목',
// 				required: true,
// 				disabled: !isView('title'),
// 				width: '300px',
// 			},
// 			{
// 				row: 0,
// 				col: 2,
// 				colSpan: 2,
// 				type: 'number',
// 				key: 'order_id',
// 				label: '순서',
// 				required: true,
// 				disabled: !isView('order_id'),
// 				width: '200px',
// 				min: 1,
// 			},
// 			{
// 				row: 1,
// 				col: 0,
// 				colSpan: 2,
// 				type: 'status',
// 				key: 'status',
// 				label: '상태',
// 				value: resultData.status,
// 			},
// 			{
// 				row: 1,
// 				col: 2,
// 				colSpan: 2,
// 				type: 'switch',
// 				key: 'is_link',
// 				label: '링크 사용',
// 				disabled: !isView('is_link'),
// 			},
// 		]
// 	},
// 	{
// 		title: ''
// 	}
// ];