import { extractStyle } from '@ant-design/static-style-extract';
import { ConfigProvider } from 'antd';
import fs from 'fs';
import React from 'react';

const outputPath = './src/styles/antd.min.css';


const brandPrimary = '#FF5200';
const textPrimary = '#1E1D1F'
const textDarker = '#000022'
const textLighter = '#8F9296'
const white = '#FDFDFD'
const css = extractStyle((node) => (
	<ConfigProvider
		theme={{
			token: {
				colorBgMask: 'rgba(217, 217, 217, 0.65)',
				colorLink: brandPrimary,
				colorLinkHover: brandPrimary,
				colorLinkActive: brandPrimary,
				colorPrimary: brandPrimary,
				colorText: textPrimary,
				colorTextBase: textPrimary,
				fontSize: 16,
				fontSizeHeading1: 28,
				fontSizeHeading2: 22,
				fontSizeHeading3: 20,
				lineHeightHeading1: 1.3,
				lineHeightHeading2: 1.3,
				lineHeightHeading3: 1.3,
				fontSizeHeading4: 16,
				fontFamily: 'Lato, Helvetica, Arial, sans-serif'
			},
			components: {
				Button: {
					// button base
					fontSize: 20,
					borderRadius: 4,
					controlHeight: 45,
					lineHeight: 45 / 20,
					controlOutlineWidth: 0,
					controlOutline: 'transparent',
					// primary button
					colorPrimary: '#FF5A0C',
					colorTextLightSolid: white,
					colorPrimaryHover: brandPrimary,
					colorPrimaryActive: brandPrimary,
					// disabled button
					colorBgContainerDisabled: '#CACACC',
					colorTextDisabled: white,
					// text button
					colorText: brandPrimary,
					colorBgTextHover: 'transparent',
					colorBgTextActive: 'transparent',
				},
				Modal: {
					borderRadiusLG: 10,
					boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
					paddingContentHorizontalLG: 32,
				},
				Tooltip: {
					fontSize: 14,
					paddingSM: 12,
					paddingXS: 10,
					borderRadius: 4,
					colorTextLightSolid: textDarker,
					colorBgDefault: white,
				},
				Steps: {
					colorSplit: brandPrimary,
					colorTextDescription: textLighter,
				},
				Input: {
					colorErrorOutline: brandPrimary,
					colorBorder: textDarker,
					colorError: textDarker,
					colorErrorBorderHover: textDarker,
					borderRadius: 2,
					fontSize: 16,
					colorIcon: '#D9D9D9',
					colorPrimaryHover: textDarker,
					colorTextPlaceholder: '#CACACC',
				},
				Select: {
					colorBorder: textDarker,
					colorPrimaryHover: textDarker,
					colorTextPlaceholder: '#CACACC',
					colorErrorOutline: brandPrimary,
					colorError: textDarker,
					colorErrorBorderHover: textDarker,
					colorTextQuaternary: textDarker,
					borderRadius: 2,
					fontSize: 16,
					borderRadiusLG: 0
				},
				Checkbox: {
					controlInteractiveSize: 24,
					colorPrimaryHover: textDarker,
					colorPrimary: textDarker,
					colorTextDisabled: textDarker,
					colorBorder: textDarker,
					borderRadiusSM: 2,
				},
				Radio: {
					colorPrimaryHover: textDarker,
					colorPrimary: textDarker,
					colorTextDisabled: textDarker,
					colorBorder: textDarker,
				},
			}
		}}
	>
		{node}
	</ConfigProvider>
));

fs.writeFileSync(outputPath, css);