import { useState } from 'react';
import { Link } from 'react-router-dom';

import Button from '../../components/common/button/Button';

import { Title, BtnWrapper, ButtonClose, ModalText } from '../../styles/Components';
import { styled } from 'styled-components';

import Modal from '../../components/common/modal/Modal';

import { useNavigate } from 'react-router-dom';
import { authList } from '../../store/authList';
import { useRecoilValue } from 'recoil';

import CreditContent from '../../components/IndexManage/CreditContent';
import VBPContent from '../../components/IndexManage/VBPContent';
import ItemContent from '../../components/IndexManage/ItemContent';
import InstanceContent from '../../components/IndexManage/InstanceContent';
import DecoContent from '../../components/IndexManage/DecoContent';

const EconomicIndex = () => {
	const navigate = useNavigate();
	const userInfo = useRecoilValue(authList);
	const [activeTab, setActiveTab] = useState('credit');

	const handleTab = (e, content) => {
		e.preventDefault();
		setActiveTab(content);
	};
	return (
		<>
			{userInfo.auth_list && !userInfo.auth_list.some(auth => auth.id === 10) ? (
				<Modal min="440px" $padding="40px" $bgcolor="transparent" $view={'view'}>
					<BtnWrapper $justify="flex-end">
						<ButtonClose onClick={() => navigate(-1)} />
					</BtnWrapper>
					<ModalText $align="center">
						해당 메뉴에 대한 조회 권한이 없습니다.
						<br />
						권한 등급을 변경 후 다시 이용해주세요.
					</ModalText>
					<BtnWrapper $gap="10px">
						<Button text="확인" theme="primary" type="submit" size="large" width="100%" handleClick={() => navigate(-1)} />
					</BtnWrapper>
				</Modal>
			) : (
				<>
					<Title>경제 지표</Title>
					<TabWrapper>
						<li>
							<TabItem $state={activeTab === 'credit' ? 'active' : 'none'} onClick={e => handleTab(e, 'credit')}>
								재화
							</TabItem>
						</li>
						<li>
							<TabItem $state={activeTab === 'vbp' ? 'active' : 'none'} onClick={e => handleTab(e, 'vbp')}>
								VBP
							</TabItem>
						</li>
						<li>
							<TabItem $state={activeTab === 'item' ? 'active' : 'none'} onClick={e => handleTab(e, 'item')}>
								아이템
							</TabItem>
						</li>
						<li>
							<TabItem $state={activeTab === 'instance' ? 'active' : 'none'} onClick={e => handleTab(e, 'instance')}>
								인스턴스
							</TabItem>
						</li>
						<li>
							<TabItem $state={activeTab === 'deco' ? 'active' : 'none'} onClick={e => handleTab(e, 'deco')}>
								의상 / 타투
							</TabItem>
						</li>
					</TabWrapper>
					{activeTab === 'credit' && <CreditContent />}
					{activeTab === 'vbp' && <VBPContent />}
					{activeTab === 'item' && <ItemContent />}
					{activeTab === 'instance' && <InstanceContent />}
					{activeTab === 'deco' && <DecoContent />}
				</>
			)}
		</>
	);
};

export default EconomicIndex;

const TabItem = styled(Link)`
	display: inline-flex;
	width: 120px;
	height: 30px;
	justify-content: center;
	align-items: center;
	background: #f9f9f9;
	border-left: 1px solid #d9d9d9;
	&:hover {
		background: #888;
		color: #fff;
	}
	${props =>
		props.$state === 'active' &&
		`background: #888;
		color: #fff;`}
`;

const TabWrapper = styled.ul`
	display: flex;
	li:first-child {
		${TabItem} {
			border-left: 0;
		}
	}
`;
