import {
	useState,
	useMemo,
} from '@wordpress/element';

import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';

import {
	Flex,
	FlexBlock,
	FlexItem,
	Tooltip,
} from '@wordpress/components';


import SubControls from './SubControls';

import { __ } from '@wordpress/i18n';


type Props = {
	id: string;
	label: string;
	value?: any;
	sortLabel: string;
	isActive: boolean;
	disabled?: boolean;
	locked?: boolean;
	subControls?: string[];
	onActive: () => void;
}

export default function SortableItem(props: Props) {
  const isMovementBlocked = props.disabled || props.locked || false;

  const {
    attributes,
    listeners,
		isDragging,
    setNodeRef,
		setActivatorNodeRef,
    transform,
    transition,
  } = useSortable({id: props.id, disabled: isMovementBlocked });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

	const [isOpen, setIsOpen] = useState<boolean>(false);

	const toggleAccordion = () => {
		setIsOpen(!isOpen);
	};

	const subControlIds = useMemo(() => props.subControls ?? [], [props.subControls]);

	// locked 状態のクラスを追加
	const wrapClasses = [
		'apura-sortable-item',
		props.isActive ? '' : 'is-hidden',
		props.locked ? 'is-locked' : '',
	].filter( Boolean ).join( ' ' );

	// ハンドル表示判定: disabled または locked ならロックアイコン
	const showLockIcon = props.disabled || props.locked;

	// ツールチップ文言の分岐
	const lockTooltipText = props.locked
		? __( 'This item is locked by the current configuration.', 'apura' )
		: __( 'This item is fixed and cannot be moved.', 'apura' );

	return (
		<div
			className={wrapClasses}
			ref={setNodeRef}
			style={style}
		>
			<Flex>
				{showLockIcon ? (
					<Tooltip text={lockTooltipText}>
						<span className="apura-sortable-item__locked" aria-label={lockTooltipText}>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" strokeWidth={2} className="apura-icon apura-icon-lock"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M18 8h1a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3h1V6a7 7 0 0 1 14 0v2zM8 8h8V6a4 4 0 0 0-8 0v2z"/></svg>
						</span>
					</Tooltip>
				) : (
					<FlexItem
						ref={setActivatorNodeRef}
						{...attributes}
						{...listeners}
						style={{ cursor: isDragging ? "grabbing" : "move" }}
						className="apura-sortable-item__handle"
						title={props.sortLabel}
					>
						<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" strokeWidth={2} className="apura-icon apura-icon-sort"><path fillRule="evenodd" clipRule="evenodd" d="M16 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M16 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M8 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M16 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M8 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M8 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>
					</FlexItem>
				)}

				<FlexBlock>
					{props.label}
				</FlexBlock>
				{subControlIds.length > 0 &&
					<FlexItem>
						<button
							type="button"
							className="apura-component-button sub-controls-toggle"
							onClick={ props.locked ? undefined : toggleAccordion }
							disabled={ !props.isActive || props.locked }
						>
							{isOpen ? <span className="dashicons dashicons-arrow-up-alt2"></span> : <span className="dashicons dashicons-arrow-down-alt2"></span>}
						</button>
					</FlexItem>
				}
				<FlexItem>
				<button
					type='button'
					className='apura-component-button'
					onClick={ props.locked ? undefined : props.onActive }
					disabled={ props.locked }
					aria-disabled={ props.locked ? true : undefined }
				>
					{props.isActive ? <span className="dashicons dashicons-visibility"></span>
						: <span className="dashicons dashicons-hidden"></span>
					}
				</button>
				</FlexItem>

			</Flex>
			{
			subControlIds.length > 0 && props.isActive && !props.locked &&
			<SubControls
				subControlIds={subControlIds}
				isOpen={isOpen}
			/>
		}


	</div>
	);
}