import React from 'react';
import {
  Box,
  Typography,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  TextField,
  Slider,
} from '@mui/material';
import { useFormContext, Controller } from 'react-hook-form';
import { ConfigurationFormContainer, MainContainer } from './configuration-form-container';

export function PaperConfiguration() {
  const { control } = useFormContext();

  return (
    <ConfigurationFormContainer>
      <MainContainer>
        {/* 布局识别 */}
        <Box>
          <Typography variant="h6" gutterBottom>
            布局识别
          </Typography>
          <Controller
            name="parser_config.layout_recognize"
            control={control}
            render={({ field }) => (
              <FormControl fullWidth>
                <InputLabel>布局识别方式</InputLabel>
                <Select
                  {...field}
                  label="布局识别方式"
                >
                  <MenuItem value="DeepDOC">DeepDOC</MenuItem>
                  <MenuItem value="Plain Text">Plain Text</MenuItem>
                </Select>
              </FormControl>
            )}
          />
        </Box>

        {/* 自动关键词 */}
        <Box>
          <Typography variant="h6" gutterBottom>
            自动关键词数量
          </Typography>
          <Controller
            name="parser_config.auto_keywords"
            control={control}
            render={({ field }) => (
              <Box sx={{ px: 2 }}>
                <Slider
                  {...field}
                  min={0}
                  max={10}
                  step={1}
                  marks
                  valueLabelDisplay="auto"
                  onChange={(_, value) => field.onChange(value)}
                />
              </Box>
            )}
          />
        </Box>

        {/* 自动问题 */}
        <Box>
          <Typography variant="h6" gutterBottom>
            自动问题数量
          </Typography>
          <Controller
            name="parser_config.auto_questions"
            control={control}
            render={({ field }) => (
              <Box sx={{ px: 2 }}>
                <Slider
                  {...field}
                  min={0}
                  max={10}
                  step={1}
                  marks
                  valueLabelDisplay="auto"
                  onChange={(_, value) => field.onChange(value)}
                />
              </Box>
            )}
          />
        </Box>

        {/* 标签数量 */}
        <Box>
          <Typography variant="h6" gutterBottom>
            Top N 标签数量
          </Typography>
          <Controller
            name="parser_config.topn_tags"
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                type="number"
                fullWidth
                label="标签数量"
                inputProps={{ min: 1, max: 10 }}
                onChange={(e) => field.onChange(parseInt(e.target.value))}
              />
            )}
          />
        </Box>

        <Box>
          <Typography variant="body2" color="text.secondary">
            论文解析器专门优化用于学术论文的解析，能够更好地识别论文的结构和内容。
          </Typography>
        </Box>
      </MainContainer>
    </ConfigurationFormContainer>
  );
}