import { FeatureLike } from 'ol/Feature';
import { Coordinate } from 'ol/coordinate';
import { Circle, Point } from 'ol/geom';
import { Fill, Stroke, Style, Text } from 'ol/style';
import { ZoneData } from '../type';

const getCircleStyleFromData = ({ zoneData }: { zoneData: ZoneData }) => {
  // Base style configuration for each zone type
  console.log('Type: ', zoneData.type);

  const circleStyles = {
    warning: {
      fill: new Fill({ color: 'rgba(250, 206, 104, 0.5)' }), // Yellow with transparency
      stroke: new Stroke({ color: '#FFC107', width: 2 }),
      textColor: '#856404',
    },
    alarm: {
      fill: new Fill({ color: 'rgba(220, 53, 69, 0.8)' }), // Red with transparency
      stroke: new Stroke({ color: '#DC3545', width: 3 }),
      textColor: '#721C24',
    },
    default: {
      fill: new Fill({ color: 'rgba(108, 117, 125, 0.2)' }), // Gray with transparency
      stroke: new Stroke({ color: '#6C757D', width: 1 }),
      textColor: '#383D41',
    },
  };

  const styleConfig = circleStyles[zoneData.type] || circleStyles.default;

  // Create styles array - we might need multiple styles for proper rendering
  const styles: Style[] = [];

  // Main style for Circle geometry (uses fill/stroke directly, not image)
  const mainStyle = new Style({
    fill: styleConfig.fill,
    stroke: styleConfig.stroke,
  });
  styles.push(mainStyle);

  // Add text style if message exists
  if (zoneData.message && zoneData.message.trim()) {
    const textStyle = new Style({
      geometry: (feature: FeatureLike) => {
        // Get the center of the circle for text placement
        const geometry = feature.getGeometry();
        if (geometry && geometry.getType() === 'Circle') {
          // For Circle geometry, get the center and return it as a Point geometry
          const circle = geometry as Circle;
          const center: Coordinate = circle.getCenter();
          return new Point(center);
        }
        return geometry;
      },
      text: new Text({
        font: 'bold 14px Arial, sans-serif',
        text: zoneData.message,
        fill: new Fill({ color: styleConfig.textColor }),
        stroke: new Stroke({
          color: 'white',
          width: 3,
        }),
        textAlign: 'center',
        textBaseline: 'middle',
      }),
    });
    styles.push(textStyle);
  }

  // Return single style if no text, or array if text exists
  return styles.length === 1 ? styles[0] : styles;
};

export default getCircleStyleFromData;