import { type FC } from 'react'
import { Location } from 'iconsax-react'
import Error from '@/components/Error'
import type { GeoJSONPolygon } from '../types/Types'

type ServiceAreaInputProps = {
    label?: string
    polygon?: GeoJSONPolygon | null
    onClick: () => void
    error_text?: string
}

const ServiceAreaInput: FC<ServiceAreaInputProps> = ({
    label,
    polygon,
    onClick,
    error_text,
}) => {
    const getDisplayText = () => {
        if (polygon?.coordinates?.[0] && polygon.coordinates[0].length > 0) {
            // در GeoJSON Polygon، اولین نقطه در انتها تکرار می‌شود تا بسته شود
            // پس باید 1 را کم کنیم تا تعداد واقعی نقاط را نشان دهیم
            const pointCount = polygon.coordinates[0].length
            const actualPointCount = pointCount > 0 ? pointCount - 1 : 0
            return `ناحیه انتخاب شده (${actualPointCount} نقطه)`
        }
        return 'روی نقشه کلیک کنید تا ناحیه را انتخاب کنید'
    }

    return (
        <div className='mt-8'>
            {label && <div className='text-sm mb-1'>{label}</div>}
            <div
                onClick={onClick}
                className='w-full bg-white h-10 text-black px-4 text-xs rounded-xl border border-border flex items-center gap-2 cursor-pointer mt-1'
            >
                <Location size={20} color='#8C90A3' />
                <span className='flex-1 text-right'>{getDisplayText()}</span>
            </div>
            {error_text && (
                <Error errorText={error_text} />
            )}
        </div>
    )
}

export default ServiceAreaInput

