// 불필요한 계층 줄이기
function Example() {
  return (
    <>
      <div>
        <div></div>
      </div>
    </>
  );
}

function StringRender() {
  // return <>'Clean Code'</> ❌
  return 'Clean Code';
}

// 렌더링 될 필요 없는 JSX 줄이기
function ConditionalRenderingEX() {
	return(
		<div>
			<h1>{isLoggedIn ? 'User' : <></>}</h1>
			<h1>{isLoggedIn ? 'User' : null}</h1>
			<h1>{isLoggedIn && 'User'}</h1>
			{isLoggedIn && <h1>User</h1>
		</dvi>
	)
}

function ComponentNaming() {
	return (
		<>
			<h1></h1> // 🤔 lowercase
			<h2></h2>
			<div></div>
			<input />
			<MyuComponent></MyComponent>  // 🤔 pascal case
			<my-component></my-component> // 🤔 kebab case
		</>
	)
}

// 🤔 어떤 형태가 맞을까?
return (
  <div>
    {TopRender()}
    <TopRender />
    {renderMain()}
  </div>
);

function ReturnJSXFunction() {
  const TopRender = () => {
    return (
      <header>
        <h1>Clean Code JS</h1>
      </header>
    );
  };

  const renderMain = () => {
    return (
      <main>
        <p>Clean Code</p>
      </main>
    );
  };

  return (
    <div>
      {TopRender()}
      {renderMain()}
    </div>
  );
}

// ❌
function OuterComponent() {
  const InnerComponent = () => {
    return <div>Inner component</div>;
  };

  return (
    <div>
      <InnerComponent />
    </div>
  );
}

// ✅
const InnerComponent = () => {
  return <div>Inner component</div>;
};

function OuterComponent() {
  return (
    <div>
      <InnerComponent />
    </div>
  );
}

// Case 1
const InputText = forwardRef((props, ref)) => {
	return <input type="text" ref={ref} />;
});

InputText.displayName = 'InputText' // 만약 🤔 displayName을 작성 안한다면?

// Case 2
const withRouter = (Component) => {
	const WithRouter = (props) => {
		const location = useLocation();
		const navigate = useNavigate();
		const params = useParams();
		const navigationType = useNavigationType();

		return (
			<Component
				{...props}
				location={location}
				navigate={navigate}
				params={params}
				navigationType={navigationType}
			/>
		);
	};
	WithRouter.displayName = Component.displayName ?? Component.name ?? 'WithRouterComponent'

	return WithRouter
};

// ✅ 변하지 않은 값은 컴포넌트 외부로 빼기
const DEFAULT_COUNT = 100;
const DEFAULT_DELAY = 500;

// ✅ 타입 또는 인터페이스도 컴포넌트 밖으로 빼기
interface SomeComponentProps {

}

// ✅ 컴포넌트와 관련없는 로직은 컴포넌트 외부로 빼기
const handleClose = () => {
	// Date
	// Local Storage
}

const SomeComponent = ({ prop1, prop2 }: SomeComponentProps) => {
	// ✅ flag 또는 ref는 상단에 표시
	let isHold = false;
	const ref = useRef(null);

	// ✅ React Third-Party 라이브러리의 훅을 사용시 상단에 표시
	const location = useLocation();
	const queryClient = useQueryClient();
	const state = useSelector((state) => state);

	// ✅ 내가 만든 Hooks을 상단에 표시
	const state = useCustomHooks((state) => state);

	// ✅ 컴포넌트 내부 상태를 상단에 표시
	const [state, setState] = useState('someState");

	const onClose = () => handleClose();

	// Early Return JSX
	if (isHold) {
		return <div>데이터가 존재하지 않습니다.</div>
	}

	// ✅ Main JSX와 가장 가까운 곳에 위치
	// - 최소 1개로 사용할 수 있도록 진행
	useEffect(() => {
	}, []);

	// ✅ JSX 반환은 항상 사전에 개행을 동반
	return (
		<div className="tooltip">
			<div className="msg">Hello World</div>
			<button
				className="close"
				type="button"
				onClick={onClose}
			/>
		</div>
	)
}

// ✅ 컴포넌트 외부로 빼기(컴포넌트 하단)
// - 코드가 많을 경우, 파일로 빼기
const Button = styled.a<{ $primary?: boolean; }>`
	padding: 0.5rem 0;
	transition: all 200ms ease-in-out;
	width: 11rem;

	&:hover {
		filter: brightness(0.85);
	}
`

export default SomeComponent;