import { useEffect, useState } from 'react';

import styled, { css } from 'styled-components';
import ResetIcon from '../../../assets/img/icon/icon-reset.png';
/**
 * @param {string} text 버튼 내부 텍스트
 * @param {string} type 버튼 타입 (button, submit)
 * @param {() => void} handleClick 버튼 클릭시 실행할 이벤트, Route 기능의 경우 history.push와 같은 함수를 이용합니다.
 * @param {string} buttonColor 버튼 배경 색상
 * @param {string} hoverColor 버튼 호버 배경 색상
 * @param {object} props 폰트 관련 속성
 */

const Button = ({ text, type = 'button', handleClick, theme, size, width, height, bordercolor, disabled, name }) => {
	return (
		<Wrapper width={width}>
			<ButtonStyle
				onSubmit={e => e.preventDefault()}
				type={type}
				disabled={disabled}
				onClick={handleClick}
				theme={theme}
				size={size}
				bordercolor={bordercolor}
				width={width}
				height={height}
				name={name}>
				{text}
			</ButtonStyle>
		</Wrapper>
	);
};

const Wrapper = styled.div`
	display: ${props => props.display || 'inline-block'};
	width: ${props => props.width};
	text-align: center;
`;

const sizes = {
	large: {
		width: '100%',
		fontSize: '17px',
		padding: '16px 20px',
		fontWeight: '600',
		height: '50px',
	},
};

const sizeStyles = css`
	${({ size }) => css`
		width: ${sizes[size].width};
		font-size: ${sizes[size].fontSize};
		border-radius: ${sizes[size].borderRadius};
		padding: ${sizes[size].$padding};
		font-weight: ${sizes[size].fontWeight};
		height: ${sizes[size].height};
	`}
`;

const ButtonStyle = styled.button`
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: ${props => props.width || '80px'};
	height: ${props => props.height || '30px'};
	min-width: fit-content;
	color: #2c2c2c;
	font-size: 14px;
	${props => props.size && sizeStyles}

	${props =>
		props.theme === 'line' &&
		css`
			border: 1px solid #2c2c2c;
			background: transparent;
		`}
  ${props =>
		props.theme === 'primary' &&
		css`
			background: #2c2c2c;
			color: #fff;
		`}
		${props =>
		props.theme === 'disable' &&
		css`
			background: #d9d9d9;
			color: #fff;
		`}
  ${props =>
		props.theme === 'reset' &&
		css`
			border: 1px solid ${props.bordercolor};
			background: url(${ResetIcon}) 50% 50% no-repeat;
			border: 1px solid #d9d9d9;
			width: 35px;
			height: 35px;
		`}
  ${props =>
		props.theme === 'gray' &&
		css`
			background: #b8b8b8;
			color: #fff;
			width: 100px;
			height: 35px;
		`}
	${props =>
		props.theme === 'search' &&
		css`
			background: #2c2c2c;
			color: #fff;
			width: 100px;
			height: 35px;
		`}
    ${props =>
            props.theme === 'find' &&
            css`
			background: #8c8c8c;
			color: #fff;
			width: 100px;
			height: 35px;
		`}
`;

export default Button;