import { Button, Card, Select, Typography } from 'antd';
import { useState } from 'react';

const { Text } = Typography;

// Recording modes for V5 - chỉ có không ghi và ghi 24/24
const RECORDING_MODES = [
  { label: 'Không ghi', value: 'none' },
  { label: 'Ghi 24/24', value: '24/7' },
];

interface CameraV5Props {
  thing: MasterModel.Thing | null;
  initialRecordingMode?: string;
}

const CameraV5: React.FC<CameraV5Props> = ({
  thing,
  initialRecordingMode = 'none',
}) => {
  const [recordingMode, setRecordingMode] = useState(initialRecordingMode);

  console.log('ConfigCameraV5 - thing:', thing);

  const handleSubmit = () => {
    console.log('Submit recording mode:', recordingMode);
    // TODO: Call API to save recording configuration
  };

  return (
    <Card bodyStyle={{ padding: 16 }}>
      {/* Recording Mode */}
      <div style={{ marginBottom: 24 }}>
        <Text strong style={{ display: 'block', marginBottom: 8 }}>
          Ghi dữ liệu camera
        </Text>
        <Select
          value={recordingMode}
          onChange={setRecordingMode}
          options={RECORDING_MODES}
          style={{ width: 200 }}
        />
      </div>

      {/* Submit Button */}
      <div style={{ textAlign: 'center' }}>
        <Button type="primary" onClick={handleSubmit}>
          Gửi đi
        </Button>
      </div>
    </Card>
  );
};

export default CameraV5;
