import { useIntl } from '@umijs/max';
import { Button, Card, Select, Typography } from 'antd';
import { useMemo, useState } from 'react';

const { Text } = Typography;

// Recording modes for V5 - chỉ có không ghi và ghi 24/24

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

const CameraV5: React.FC<CameraV5Props> = ({
  thing,
  initialRecordingMode = 'none',
}) => {
  const intl = useIntl();

  const RECORDING_MODES = useMemo(
    () => [
      {
        label: intl.formatMessage({
          id: 'master.devices.camera.config.recordingMode.none',
          defaultMessage: 'Không ghi',
        }),
        value: 'none',
      },
      {
        label: intl.formatMessage({
          id: 'master.devices.camera.config.recordingMode.all',
          defaultMessage: '24/24',
        }),
        value: 'all',
      },
    ],
    [intl],
  );

  const [recordingMode, setRecordingMode] = useState(initialRecordingMode);

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

  return (
    <Card bodyStyle={{ padding: 16 }}>
      {/* Recording Mode */}
      <div className="mb-6">
        <div className="flex flex-col sm:flex-row gap-2 sm:gap-4 items-start sm:items-end">
          <div className="w-full sm:w-1/3 lg:w-1/4">
            <Text strong className="block mb-2">
              {intl.formatMessage({
                id: 'master.devices.camera.config.recording',
                defaultMessage: 'Ghi dữ liệu camera',
              })}
            </Text>
            <Select
              value={recordingMode}
              onChange={setRecordingMode}
              options={RECORDING_MODES}
              className="w-full"
              popupMatchSelectWidth={false}
            />
          </div>
          <Button type="primary" onClick={handleSubmit}>
            {intl.formatMessage({
              id: 'master.devices.camera.config.send',
              defaultMessage: 'Gửi đi',
            })}
          </Button>
        </div>
      </div>
    </Card>
  );
};

export default CameraV5;
