// 1.1 匯入 fs 模組
const fs = require('fs')
// 1.2 匯入 path 模組
const path = require('path')

// 1.3 定義正則表示式，分別匹配 <style></style> 和 <script></script> 標籤
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

// 2.1 呼叫 fs.readFile() 方法讀取檔案
 

fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function(err, dataStr) {
  // 2.2 讀取 HTML 檔案失敗
  if (err) return console.log('讀取HTML檔案失敗！' + err.message)
  // 2.3 讀取檔案成功後，呼叫對應的三個方法，分別拆解出 css, js, html 檔案
  resolveCSS(dataStr)
  resolveJS(dataStr)
  resolveHTML(dataStr)
})

// 3.1 定義處理 css 樣式的方法
 

function resolveCSS(htmlStr) {
  // 3.2 使用正則提取需要的內容
  const r1 = regStyle.exec(htmlStr)
  // 3.3 將提取出來的樣式字串，進行字串的 replace 替換操作
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
  // 3.4 呼叫 fs.writeFile() 方法，將提取的樣式，寫入到 clock 目錄中 index.css 的檔案裡面
  fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function
 
(err) {
    if (err) return console.log('寫入 CSS 樣式失敗！' + err.message)
    console.log('寫入樣式檔案成功！')
  })
}

// 4.1 定義處理 js 指令碼的方法
function resolveJS(htmlStr) {
  // 4.2 通過正則，提取對應的 <script></script> 標籤內容
  const r2 = regScript.exec(htmlStr)
  // 4.3 將提取出來的內容，做進一步的處理
  const newJS = r2[0].replace('<script>', '').replace('</script>', '')
  // 4.4 將處理的結果，寫入到 clock 目錄中的 index.js 檔案裡面
  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
    if (err) return console.log('寫入 JavaScript 指令碼失敗！' + err.message)
    console.log('寫入 JS 指令碼成功！')
  })
}

// 5.1 定義處理 HTML 結構的方法
function resolveHTML(htmlStr) {
  // 5.2 將字串呼叫 replace 方法，把內嵌的 style 和 script 標籤，替換為外聯的 link 和 script 標籤
  const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
  // 5.3 寫入 index.html 這個檔案
  fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
    if (err) return console.log('寫入 HTML 檔案失敗！' + err.message)
    console.log('寫入 HTML 頁面成功！')
  })
}