import styled, { css } from 'styled-components';
import { useEffect, useState } from 'react';

import { MailExcelDown, MailMultiRegsit } from '../../apis';
import { AlertText } from '../../styles/Components';

const MailRegistUploadBtn = ({ disabled, setResultData, resultData, downloadData, disabledBtn, setExcelFile, alertMessage, setAlertMessage, handleDetailDelete, excelName, setExcelName, status }) => {
	useEffect(() => {
		excelName && setExcelName(null);
	}, [downloadData]);

	const handleFile = async e => {
		const token = sessionStorage.getItem('token');

		setExcelFile(e.target.files[0]);
		setExcelName(e.target.files[0].name);

		let updateData = await MailMultiRegsit(token, e.target.files[0]);
		const message = updateData.data.data.message;

		if (message === 'Excel 파일을 선택해주세요.' 
			|| message === 'Maximum upload size exceeded' 
			|| message === "guid(32자)를 확인해주세요.") {
			setAlertMessage('유효하지 않은 파일입니다.');
		} else if (message === '중복된 유저 정보가 있습니다.') {
			setAlertMessage('중복된 유저 정보가 있습니다.');
		} else {
			setAlertMessage('');
		}

		handlePostGuid(updateData);
	};

	// 저장된 엑셀 파일 -> API 로 전송
	const handlePostGuid = fileName => {
		// console.log("fileName.data.data.file_name", fileName.data.data.file_name)
		setResultData({ ...resultData, file_name: fileName.data.data.file_name });
	};

	// 등록 페이지에서 파일 삭제
	const handleFileDelete = e => {
		document.querySelector('#fileinput').value = '';
		setResultData({ ...resultData, list: [], file_name: '' });

		setExcelFile(null);
	};

	// 상세페이지에서 파일 다운로드 버튼
	const handleDownloadExcel = async () => {
		const token = sessionStorage.getItem('token');
		await MailExcelDown(token, downloadData ? downloadData : 'mail_sample.xlsx');
	};

	// console.log('undefinedFile 컴포넌트에서 ', undefinedFile);
	// console.log('excelFile ...', excelFile);

	// console.log("excelName", excelName);
	// console.log(resultData);
	return (
		<>
			{/* form */}
			<div className="form-group custom-form">
				<FileWrapper>
					{/* 상세 페이지 : 파일업로드 버튼 */}
					<FileInput 
						type="file" 
						required onChange={handleFile} 
						id="fileinput" 
						disabled={disabledBtn || resultData.receive_type !== "MULTIPLE"}
						style={{ display: downloadData ? 'none' : 'block' }} 
					/>

					{/* 파일명 라벨 */}
					{downloadData && (
						<FileLabel htmlFor="fileinput" disabled={disabled}>
							{downloadData}
						</FileLabel>
					)}
					{/* 등록 페이지 :  파일이 있을 때 파일 삭제용 버튼 */}
					{excelName ? (
						<>
							<FileButton
								onClick={() => {
									handleFileDelete();
									setExcelName(null);
								}}>
								파일 삭제
							</FileButton>
							<AlertText>{alertMessage}</AlertText>
						</>
					) : // 상세 페이지 : 저장된 파일이 복수일 때
					resultData.guid && resultData.receive_type === 'MULTIPLE' ? (
						<>
							<FileButton
								disabled={resultData.is_reserve === false && disabledBtn || status === 'FINISH'}
								onClick={e => {
									handleDetailDelete(e);
									setExcelName(null);
								}}>
								파일 삭제
							</FileButton>
						</>
					) : (
						<FileButton htmlFor="fileinput" disabled={disabled}>
							엑셀 업로드
						</FileButton>
					)}

					{downloadData && <FileButton onClick={handleDownloadExcel}>다운로드</FileButton>}
					{!downloadData && !disabled && <FileButton onClick={handleDownloadExcel}>샘플 다운로드</FileButton>}
				</FileWrapper>
				<FileNotice>* .xlsx, .xls 확장자의 파일만 업로드 가능합니다.</FileNotice>
			</div>
		</>
	);
};

export default MailRegistUploadBtn;

const FileWrapper = styled.div`
	display: inline-flex;
	align-items: center;
	margin-right: 20px;
	margin-left: 20px;
	gap: 5px;
`;

const FileButton = styled.label`
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: fit-content;
	font-size: 14px;
	background: #2c2c2c;
	color: #fff;
	width: 100px;
	height: 35px;
	cursor: pointer;

	${props =>
		props.disabled &&
		css`
			background: #b8b8b8;
			cursor: not-allowed;
		`}
`;

const FileInput = styled.input`
	height: 35px;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	width: 400px;
	padding: 0 15px;
	line-height: 35px;
	font-size: 14px;
	cursor: pointer;
	&::file-selector-button {
		display: none;
	}
	&:disabled {
		color: #cccccc;
		background: #f6f6f6;
	}

	${props =>
		props.disabled &&
		css`
			color: #cccccc;
			background: #f6f6f6;
		`}
`;

const FileLabel = styled.label`
	height: 35px;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	white-space: nowrap;
	padding: 0 15px;
	line-height: 35px;
	font-size: 14px;
	cursor: pointer;
	&::file-selector-button {
		display: none;
	}
	&:disabled {
		color: #cccccc;
		background: #f6f6f6;
	}

	${props =>
		props.disabled &&
		css`
			color: #cccccc;
			background: #f6f6f6;
		`}
`;

const FileNotice = styled.div`
	margin: 10px 25px 0;
	color: #cccccc;
`;