import React from 'react';
import { Box, Stack, Heading } from '@chakra-ui/react';
import { GeneralInfo } from '../types/cv';
import { UserDataImport } from './UserDataImport';
// Use our Patternfly component instead
import PatternflyTextInput from './PatternflyTextInput';
// @ts-ignore
import RedHatButton from './RedHatButton';

// Red Hat brand colors
const colors = {
  red: "#ee0000",
  redHover: "#cc0000",
  redActive: "#a30000",
  blue: "#0066cc",
  blueHover: "#004080", 
  blueActive: "#002952",
  gray: {
    light: "#f5f5f5",
    medium: "#d2d2d2",
    dark: "#4c4c4c"
  }
};

interface GeneralInfoFormProps {
  generalInfo: GeneralInfo;
  onChange: (generalInfo: Partial<GeneralInfo>) => void;
  onImportUserData: (kerberosId: string) => Promise<{ success: boolean; error?: string }>;
  isLoadingUserData: boolean;
}

export const GeneralInfoForm: React.FC<GeneralInfoFormProps> = ({ 
  generalInfo, 
  onChange,
  onImportUserData,
  isLoadingUserData
}) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange({ [e.target.name]: e.target.value });
  };
  
  return (
    <Box>
      <Heading size="md" mb={4} fontFamily="'Red Hat Display', sans-serif">General Information</Heading>
      
      {/* Rover API Import Section */}
      <UserDataImport onImport={onImportUserData} isLoading={isLoadingUserData} />
      <Box borderBottom="1px solid" borderColor={colors.gray.medium} my={4} />
      
      <Stack gap={4} direction="column">
        <PatternflyTextInput
          id="name"
          label="Name"
          name="name"
          value={generalInfo.name}
          onChange={handleChange}
        />
        
        <PatternflyTextInput
          id="jobTitle"
          label="Job Title"
          name="jobTitle"
          value={generalInfo.jobTitle}
          onChange={handleChange}
        />
        
        <PatternflyTextInput
          id="nationality" 
          label="Nationality"
          name="nationality"
          value={generalInfo.nationality}
          onChange={handleChange}
        />
        
        <PatternflyTextInput
          id="location"
          label="Location"
          name="location"
          value={generalInfo.location}
          onChange={handleChange}
        />
        
        <PatternflyTextInput
          id="languages"
          label="Languages"
          name="languages"
          value={generalInfo.languages}
          onChange={handleChange}
        />
      </Stack>
    </Box>
  );
};