import { LoadingButton } from '@mui/lab';
import 
{ 
    Avatar,
    FormControl,
    InputLabel,
    Select,
    FormHelperText,
    MenuItem 
} from '@mui/material';
import { Card } from '@mui/material';
import { Stack, Typography } from '@mui/material';
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';
import { useRef, useState, useContext } from 'react';
import { makeFormData } from '@/utils/jsonToFormData';
import { format } from 'date-fns';
import { LanguageContext } from '@/contexts/LanguageContext';

interface MemberType {
    members: any;
    services: any;
}
interface FormRequestClaimProps {
    member: MemberType;
    handleSubmitSuccess: () => void;
}
export default function FormRequestClaim({ member, handleSubmitSuccess }: FormRequestClaimProps) {
    const { localeData }: any =  useContext(LanguageContext);
    const [serviceCode, setServiceCode] = useState<string>('');

    const [submitLoading, setSubmitLoading] = useState<boolean>(false);
    function submitRequest() {
        if(serviceCode == '')
        {
            enqueueSnackbar(localeData.txtDialogMember4, { variant: 'warning' });
            return false;
        }
        setSubmitLoading(true);
        const formData = {
            member_id: member.members.id,
            service_code: serviceCode
        };
        axios
        .post('/request-log', formData)
        .then((response) => {
            console.log(response);
            if (response && response.data && response.data.meta) {
                enqueueSnackbar(response.data.meta.message, { variant: 'success' });
                handleSubmitSuccess();
            }  
        })
        .catch(({ response }) => {
            if (response && response.data && response.data.meta) {
                enqueueSnackbar(response.data.meta.message, { variant: 'error' });
            } 
        })
        .then(() => {
            setSubmitLoading(false);
        });
    }

    interface MemberService {
        service_code: string;
        name: string;
    }

    return (
        <Stack direction="column" spacing={4}>
        <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
            <Typography variant='body2' sx={{color: '#757575'}}>
            {localeData.txtDialogMember5}
            </Typography>
            <Typography variant='body2' sx={{fontWeight:'bold'}}>{format(new Date(), "d MMM yyyy")}</Typography>
        </Stack>

        <Stack direction="row" spacing={2}>
            <Stack spacing={2} sx={{width:'100%'}}>
                <Typography variant='subtitle1'>{localeData.txtDialogMember1}*</Typography>
                <FormControl>
                <InputLabel htmlFor="service_type">
                {localeData.txtDialogMember1}
                </InputLabel>
                <Select
                    id="service_type"
                    value={serviceCode}
                    fullWidth
                    label={localeData.txtDialogMember1}
                    onChange={(e) => {
                    setServiceCode(e.target.value);
                    }}
                >
                {member && member?.services?.map((item: MemberService, index:number) => (
                    <MenuItem key={index} value={item.service_code}>{item.name}</MenuItem>
                ))}
                </Select>
                <FormHelperText style={{ color: 'red' }}></FormHelperText>
                </FormControl>
            </Stack>
        </Stack>

        <Card sx={{ p: 1, background: '#f4f6f8'}}>
            <Stack direction="row">
            <Avatar
                src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
                alt={member?.members.name ?? ''}
                sx={{ marginTop: 1, width: 48, height: 48 }}
            />
            <Stack sx={{ p: 1 }}>
                <Typography variant="body2">{member?.members.name ?? ''}</Typography>
                <Typography variant="body2" sx={{color:'#637381'}}>{member?.members.member_id ?? ''}</Typography>
            </Stack>
            </Stack>
        </Card>

        <LoadingButton
            variant="contained"
            sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
            onClick={() => {
            submitRequest();
            }}
            loading={submitLoading}
        >
            {localeData.txtDialogMember2}
        </LoadingButton>
        </Stack>
    );
}