import { Box, Text, Stack, Group, TextInput, Select, Switch, ColorInput, Slider, NumberInput } from '@mantine/core';
import { useState, useCallback, memo } from 'react';

interface Properties {
  name: string;
  type: string;
  visible: boolean;
  color: string;
  opacity: number;
  size: number;
}

interface PropertiesDockProps {
  onPropertiesChange?: (properties: Properties) => void;
}

function PropertiesDockComponent({ onPropertiesChange }: PropertiesDockProps) {
  const [properties, setProperties] = useState<Properties>({
    name: 'Elemento 1',
    type: 'rectángulo',
    visible: true,
    color: '#339af0',
    opacity: 100,
    size: 50,
  });

  const updateProperty = useCallback(<K extends keyof Properties>(key: K, value: Properties[K]) => {
    const newProperties = { ...properties, [key]: value };
    setProperties(newProperties);
    onPropertiesChange?.(newProperties);
  }, [properties, onPropertiesChange]);

  return (
    <Box p="md" h="100%">
      <Text size="lg" fw={600} mb="md">Propiedades</Text>

      <Stack gap="md">
        <TextInput
          label="Nombre"
          value={properties.name}
          onChange={(e) => updateProperty('name', e.target.value)}
        />

        <Select
          label="Tipo"
          value={properties.type}
          onChange={(value) => updateProperty('type', value || 'rectángulo')}
          data={[
            { value: 'rectángulo', label: 'Rectángulo' },
            { value: 'círculo', label: 'Círculo' },
            { value: 'triángulo', label: 'Triángulo' },
            { value: 'línea', label: 'Línea' },
          ]}
        />

        <Switch
          label="Visible"
          checked={properties.visible}
          onChange={(e) => updateProperty('visible', e.currentTarget.checked)}
        />

        <ColorInput
          label="Color"
          value={properties.color}
          onChange={(value) => updateProperty('color', value)}
        />

        <Box>
          <Text size="sm" fw={500} mb="xs">Opacidad: {properties.opacity}%</Text>
          <Slider
            value={properties.opacity}
            onChange={(value) => updateProperty('opacity', value)}
            min={0}
            max={100}
            step={5}
            marks={[
              { value: 0, label: '0%' },
              { value: 50, label: '50%' },
              { value: 100, label: '100%' }
            ]}
          />
        </Box>

        <NumberInput
          label="Tamaño"
          value={properties.size}
          onChange={(value) => updateProperty('size', Number(value) || 0)}
          min={1}
          max={200}
          step={1}
        />

        <Box p="md" style={{
          border: '1px solid #e0e0e0',
          borderRadius: '4px',
          backgroundColor: '#f8f9fa'
        }}>
          <Text size="sm" fw={500} mb="xs">Vista previa:</Text>
          <Box
            style={{
              width: properties.size,
              height: properties.size,
              backgroundColor: properties.color,
              opacity: properties.opacity / 100,
              borderRadius: properties.type === 'círculo' ? '50%' : '4px',
              display: properties.visible ? 'block' : 'none',
            }}
          />
          {!properties.visible && (
            <Text size="xs" c="dimmed">Elemento oculto</Text>
          )}
        </Box>
      </Stack>
    </Box>
  );
}

export const PropertiesDock = memo(PropertiesDockComponent);